How do I make the red border perfectly overlap the grey border?
Just have this set as of:
const StyledSelect = styled(Select)`
border: 1px solid red;
The rendered HTML is:
<div class="clearfix">
<div class="Search_search__fYl81 sc-bdVaJa xpdcY">
<div class="Select dropdown-arrow Select--single is-clearable is-searchable">
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-2--value">
<div class="Select-placeholder">Search</div>
<div class="Select-input"><input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-2--value" class="Select-input" value=""></div>
</span>
<span class="Select-arrow-zone"><i class="fa fa-search" aria-hidden="true" style="color: rgb(153, 153, 153);"></i></span>
</div>
</div>
</div>
</div>
border: 10px solid red;
When I click on any link it's names should up in above banner, like sr no 1 name is jack and smith then TEST1 should replace by jack and test2 by smith and when i click on other name then in place of jack and smith those names should show and i have 100+ data names so i need just a simple few lines jQuery code which will do that without refreshing my page... and one more thing when page loads then TEST1 and TEST2 should show auto 1st name...
Sorry I did a lot of typing but starter here please help
<div style="border:1px solid black;">
<div style="display:inline; margin-left:20%;">
<img style="display:inline;" src="images/soccer-ball.png" height="50px" width="50px">
<p id="h1" style="display:inline;" placeholder="Test">TEST1</p>
</div>
<div style="display:inline; margin-left:30%;">
<img style="display:inline;" src="images/soccer-ball.png" height="50px" width="50px">
<p id="h2" style="display:inline;">TEST2</p>
</div>
</div>
<br>
<div>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 1</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p id="home">jack</p>
<p id="away">Smith</p>
</div>
</div>
</a>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 2</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p id="home">Jhon</p>
<p id="away">hill</p>
</div>
</div>
</a>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 3</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p>jason</p>
<p>smantha</p>
</div>
</div>
</a>
<a href="#" id="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 4</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p>Ducan</p>
<p>Gio</p>
</div>
</div>
</a>
</div>
$(document).ready(function(){
$("#h1").replaceWith($('#home').text());
$("#h2").replaceWith($('#away').text());
});
$("#link").click(function(){
var x = $("#home").html();
var y = $("#away").html();
//alert(x);
$("#h1").html(x);
$("#h2").html(y);
});
You should not assign the same id to multiple html elements (it is malformed and jQuery won't be able to find the elements you intend). In addition, you forgot to set attributes for some of the names that you want to populate at the top. Finally, you are using replaceWith() which is removing the elements that you are then looking to update later on click. I changed several of your ids to classes, filled in the missing ones, and updated your jQuery to eliminate the replaceWith() issue and work with the class approach. See below.
$(document).ready(function() {
$("#h1").html($(".home").first().text());
$("#h2").html($(".away").first().text());
});
$(".link").click(function() {
var x = $(this).find(".home").first().html();
var y = $(this).find(".away").first().html();
$("#h1").html(x);
$("#h2").html(y);
});
<div style="border:1px solid black;">
<div style="display:inline; margin-left:20%;">
<img style="display:inline;" src="https://via.placeholder.com/50x50" height="50px" width="50px">
<p id="h1" style="display:inline;" placeholder="Test">TEST1</p>
</div>
<div style="display:inline; margin-left:30%;">
<img style="display:inline;" src="https://via.placeholder.com/50x50" height="50px" width="50px">
<p id="h2" style="display:inline;">TEST2</p>
</div>
</div>
<br>
<div>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 1</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">jack</p>
<p class="away">Smith</p>
</div>
</div>
</a>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 2</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">Jhon</p>
<p class="away">hill</p>
</div>
</div>
</a>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 3</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">jason</p>
<p class="away">smantha</p>
</div>
</div>
</a>
<a href="#" class="link" style="color: inherit; text-decoration: none;">
<div style="border:1px solid black;">
<div style="display:inline-block; border:1px solid black;">
<p>Sr no 4</p>
</div>
<div style="display:inline-block; border:1px solid black;">
<p class="home">Ducan</p>
<p class="away">Gio</p>
</div>
</div>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Is there any way possible to apply animation effect to images in my about section,here is the code:
<div id="about" class="row section bgimg3">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
Here is my link to code pen: https://codepen.io/saisree/pen/WjVjMW
What i want to do is there are three images in my about section,i don't want to display all the three images at a time,i want to appear one by one when i click on about section in header!I want to use animation for this!
I recommend this library https://github.com/michalsnik/aos . Is very simple the implementation and you can get delay for any class.
Example: https://michalsnik.github.io/aos/
there are different ways to implement it, since you are using jQuery, you can try fade in effects, like the example https://codepen.io/RACCH/pen/bRbpwM
adding this event to your about tab, and hiding the circled images
$(".img-circle").hide();
var iteration=1;
$(".1").click(function() {
$('html,body').animate({
scrollTop: $("#about").offset().top},
'slow');
$(".img-circle").hide();
$('#'+iteration+'-img-circle').fadeIn(2000);
if(iteration==3) iteration=1;
else iteration++;
});
Add the following jQuery:
$(".1").click(function() {
$(".col-sm-4.pull-right img:nth-child(1)").hide();
$(".col-sm-4.pull-right img:nth-child(2)").hide();
$(".col-sm-4.pull-right img:nth-child(3)").hide();
$(".col-sm-4.pull-right img:nth-child(1)").fadeIn(2000);
$(".col-sm-4.pull-right img:nth-child(2)").fadeIn(4000);
$(".col-sm-4.pull-right img:nth-child(3)").fadeIn(6000);
});
Add below code.
$('.img-circle').mouseenter(function(){
$(this).animate({
'border-radius': '40%'},
'slow',
function(){
$(this).animate({
'border-radius': '50%'},
'fast');
});
})
This working code will help you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$().ready(function () {
$(".0").click(function () {
$('html,body').animate({
scrollTop: $("#home").offset().top
},
'slow');
});
$(".1").click(function () {
$('html,body').animate({
scrollTop: $("#about").offset().top
},
'slow');
});
$('.img-circle').mouseenter(function () {
$(this).animate({
'border-radius': '40%'
},
'slow',
function () {
$(this).animate({
'border-radius': '50%'
},
'fast');
});
})
$(".2").click(function () {
$('html,body').animate({
scrollTop: $("#family").offset().top
},
'slow');
});
$(".3").click(function () {
$('html,body').animate({
scrollTop: $("#blog").offset().top
},
'slow');
});
$(".4").click(function () {
$('html,body').animate({
scrollTop: $("#testimonial").offset().top
},
'slow');
});
$(".5").click(function () {
$('html,body').animate({
scrollTop: $("#spec").offset().top
},
'slow');
});
$(".6").click(function () {
$('html,body').animate({
scrollTop: $("#contact").offset().top
},
'slow');
});
$(".overlay + img").each(function () {
var w = $(this).css("width");
$(this).prev(".overlay").css("width", w);
});
});
</script>
<style>
#blog a {
color: Bisque;
text-decoration: underline;
}
.bgimg {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A");
background-position: center;
background-size: cover;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3 {
text-color: black;
}
#family h2 {
color: black;
text-decoration: none;
}
#Nav h3 {
color: black;
text-decoration: none;
}
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(255, 255, 255, 0.48);
/* background-color: white; */
overflow: hidden;
height: 0;
transition: .5s ease;
}
.ovparent:hover .overlay {
height: 100%;
}
.ovparent {
position: relative;
}
#over {
text-align: center;
}
.bgimg1 {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJRGtOjps8wjohBoCFu3oDrwu4O6RakP9KgUbbBHPdoFb_MuUs");
background-position: center;
background-size: cover;
}
.bgimg2 {
background-image: url("data:image/jpeg;base64,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");
background-position: center;
background-size: cover;
}
.well.first {
background-color: Bisque;
}
.well.second {
background-color: LightGoldenRodYellow;
}
.well.third {
background-color: Thistle;
}
.well.fourth {
background-color: Pink;
}
</style>
</head>
<body>
<div id="Nav" class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="https://codepen.io/saisree/full/WjVjMW/">Anand Reddy</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" ">
<li class="active"><a class="0" href="#home">Home</a></li>
<li><a class="1" href="#about">About</a></li>
<li><a class="2" href="#family" >Meet the family</a></li>
<li>Blog</li>
<li >Testimonials</li>
<li >Specialization</li>
<li ><a class="6" href="#contact">contact</a></li>
</ul>
</div>
<div class="jumbotron myjumbotron ">
<section class="bgimg" id="home">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h1 style="color:white;" class="text-center">ANAND REDDY</h1>
<h3 style="color:white;" class="text-center">A WONDERFUL SERENITY HAS TAKEN POSSESSION OF MY ENTIRE SOUL, LIKE THESE
SWEET MORNINGS OF SPRING WHICH I ENJOY WITH MY WHOLE HEART
</h3>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
<hr style="border: 1px solid black" />
<div id="about" class="row section">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="family" class="gray-bg">
<section class="container section team-3col ">
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
</section>
</div>
<hr style="border: 1px solid black" />
<div id="blog" class="section bgimg1">
<p> </p>
<h1 style="color:Bisque;" class="text-center">Welcome to my Blog</h1>
<h2 style="color:Bisque;" class="text-center">"Man must explore, and this is exploration at its greatest"</br>
Problems look mighty small from 150 miles up
</h2>
<p> </p>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h2 >
Know about my backgound
<h2>
</div>
<div class="col-md-5 col-md-offset-1"> <h2> Know about my specialization</h2></div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1"><h2> Contact My Firm</h2></div>
<div class="col-md-5 col-md-offset-1">
<h2 class="text-center"> Visit my portfolio</h2></div>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="testimonial" class="section">
<div class="section-header">
<h2 style="color:white"; class="text-center">Testimonials</h2>
<h4 style="color:white"; class="text-center">
We have worked with hundreds of clients. Check what our awesome happy clients saying about us.
</h4>
</div>
<p> </p>
<div class="row">
<div class="well first col-md-3 ">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span>
</div>
<div class="well second col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well third col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well fourth col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
</div> </div>
<hr style="border: 1px solid black" />
<div id="spec" class="section bgimg2">
<p> </p>
<h2 style="color:black" class="text-center">So, what will I actually be doing?</h2>
<h3 style="color:SlateGrey" class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Attending court hearings (and doing the preparation beforehand)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Drawing up contracts and other legal documents </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Negotiating (not all cases will end up in court)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Explaining the law and giving general legal advice </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Settling disputes and supervising any agreements </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Researching and gathering evidence</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Analysing legal documents</h2>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Supervising legal assistants.</h3>
<p> </p>
</div>
<hr style="border: 1px solid black" />
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading" style="color:black">Let's Get In Touch!</h2>
<hr class="primary">
<h3 style="color:black">Ready to discuss your next case with me? That's great! Give me a call or send an email and I will get back to you as soon as possible!</h3>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<h3><span class="glyphicon glyphicon-earphone">986-60-32199</span></h3>
</div>
<div class="col-lg-4 text-center">
<h3><span class="glyphicon glyphicon-envelope">anandreddyv.25#gmail.com</span></h3>
</div>
</div>
</div>
</section>
<hr style="border: 1px solid black " />
</div>
</div>
</div>
<footer class="text-center ">
<p>Copyrights © <span class="text-primary">anand reddy vennapusa.</span> All Right Reserved.</p>
<p>Developed By : saisree vennapusa</p>
</footer>
</body>
</html>
I have a remove function that remove class. It perform correctly except if it found a duplicate.
How could I solve the problem? Here is GIF's
Correct: https://gyazo.com/cdd6800f4f847d21d97a071241f76242
Duplicate name: https://gyazo.com/d166fcf19af8a147fcb2897bfeb695ed
Here's the code:
$('li img[title="' + removedname + '"]:last').parent().parent().removeClass('red lighten-1 white-text selected-item');
HTML
<li class="col 2 zoomIn animated" style="padding: 8px; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" data-itemnaaaaaaaaaaaame="★ Butterfly Knife | Crimson Web (Field-Tested)" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="2761454276">
<div class="iteam" style="text-decoration: underline;text-align: left">Butterfly Knife | Crimson Web</div>
<div class="condition" style="text-align: left;text-size:13px">Field Tested</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">
Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">BitSkins Price: $111.43 (You save: $-38.15)</div>
<div class="buyer-price center-align">$149.58</div>
</div>
</div>
</div>
</li>
Use closest instead of :last
$('li img[title="' + removedname + '"]').closest('.card').removeClass('red lighten-1 white-text selected-item');
This is my code. I want to get a dynamic div content list in my 'content1' div.
For example. When this page started loading, I would do an ajax request to get some info. According the info, create some divs (the number of divs is from info array's count) which has the same stylesheet as 'accountContent' div but has different content.
<div class="main">
<br>
<div id="content1" style=" border-radius: 8px; width: 100%;margin: auto; background-color: white;-webkit-box-shadow: 3px 3px 3px;-moz-box-shadow: 3px 3px 3px;box-shadow: 3px 3px 3px; ">
<br>
<div class="accountContent">
<div style="width: 95%;margin: auto; background-color: rgb(245,245,245);height: 40px;border-radius: 10px">
<div class="col-md-4" style="padding-top: 10px;">
<p style="width:95%; margin: auto">公众号名称</p>
</div>
<div class="col-md-4" style="padding-top: 10px;">
<p style="width:95%; margin: auto">接入状态：</p>
</div>
<div class="col-md-4" style="padding-top: 5px; ">
<button type="button" class="button button-small button-plain button-borderless" data-toggle="tooltip" data-placement="left" title="删除" style="float:right;"><i class="fa fa-times" style=" color: #101010"></i></button>
</div>
</div>
<div style="width: 95%;margin: auto; background-color: white;height: 50px;border-radius: 10px">
<div class="col-md-4" style="padding-top: 10px;">
<img src="images/default.jpg" style="width: 40px;height: 40px;border-radius: 20px;float: left">
<div style="margin-left: 10px; padding-top: 10px;float: left"><p>物管助手</p></div>
</div>
<div class="col-md-4" style="padding-top: 20px;">
<p style=" margin-left: 12px;float: left">接入成功</p><i class="fa fa-check" style="padding-top: 2px; padding-left: 2px;"></i>
</div>
<div class="col-md-4" style="padding-top: 10px;">
<i class="fa fa-pencil" style="padding-top: 11px;"></i> 编辑
<i class="fa fa-wrench" style="padding-top: 11px;"></i> 功能管理
</div>
</div>
<br>
</div>
<br>
<br>
</div>
It shows as in this screenshot:
Any markup you add to your page will be styled with the CSS rules already applied to the page. In your case it sounds like you simply need to apply .accountContent to those new DIVs.
You do not have to create a stylesheet for them. If they have different styles than those already on the page, simply add the CSS selector that you've applied to those new DIVs in your current CSS file. When the Ajax adds the new DIVs to the page they will by styled according to the selectors they match.