Develop Reference

I gave class "img-fluid" to my image but it doesn’t fit the screen

I gave my image class "img-fluid" in Bootstrap but it doesn’t fit my web page what should I do?
<img src="images\406201.jpg" class="img-fluid" alt="...">
<div style="margin-top: 0px ;margin-left: 12px; width: 98.4%;" class="footer bg-dark text-light p-5">
<h3 style="text-align: center;">follow Us</h3>
<div class="d-flex justify-content-center flex-wrap">
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;" src="images/facebook-logo.png"
class="bg-light" alt="..."></a>
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;" src="images\twitter-logo.png"
class="bg-light" alt="..."></a>
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
src="images\instagram-logo-png-transparent-0.png" class="bg-light" alt=""></a>
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
src="images\telegram-logo-png-0.png" class="bg-light" alt=""></a>
</div>
<h4 style="text-align: center; margin-top: 15px;">Powered by Marvel Studious</h4>
</div>
When I give it style="width=100%" it works but the problem is it doesn’t need CSS.

I'm not sure if this is the problem, but img-fluid puts the image in the maximum size possible given where it is, for example, if it is inside a div, the image will be the size of the div and not the screen, so make sure you don't have the image inside something that is limiting its size

Put the image in a div with class "container-fluid".
<style>
.width-complete{
width:100%
}
</style>
<div class="container-fluid">
<img src="images\406201.jpg" class="width-complete" alt="...">
</div>

Same div ID on page to collapsed

I have two div on same page with same id. I want explore description of one div. In my case if i click on div then all desc are expand.
$(document).ready(function() {
var collapsed = "image";
$("#shw_desc").click(function() {
if ($(".desc").is(":visible")) {
$(".desc").slideUp();
$("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(0deg)");
} else {
$(".desc").slideDown();
$("#shw_desc_icon img").attr("src", collapsed).css("transform", "rotate(180deg)");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description</p>
</div>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description 2</p>
</div>

I have two div on same page with same id
This is invalid in HTML. id attributes must be unique within a page. Change the markup to use a common class attribute on those elements instead.
From there you can use the this keyword to reference the element that raised the click event and find the related elements which should be amended.
Also note that you can simplify the logic in your JS code by using slideToggle() and toggleClass() over an if statement, and you can simplify the HTML by putting the inline styles in to a stylesheet. Try this:
$(document).ready(function() {
var collapsed = "image";
$(".shw_desc").click(function() {
$(this).toggleClass('open').next('.desc').slideToggle();
$(this).find(".shw_desc_icon img").attr("src", collapsed);
});
});
.shw_desc {
background-color: #dfdfdf;
font-size: 14px;
float: left;
padding: 4px 12px;
width: 90.3%;
color: #666
}
.shw_desc_icon {
float: right;
transform: rotate(0deg);
}
.shw_desc.open .shw_desc_icon {
transform: rotate(180deg);
}
.desc {
display: none;
border: 1px solid #eee;
padding: 6px 12px;
color: #999;
font-size: 13px;
width: 90%;
float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shw_desc nt_selected">
<span>Description 1</span>
<span class="shw_desc_icon glyphicon glyphicon-chevron-right">
<img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
</span>
</div>
<div class="desc">
<p>Some Description 1</p>
</div>
<div class="shw_desc nt_selected">
<span>Description 2</span>
<span class="shw_desc_icon glyphicon glyphicon-chevron-right">
<img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block">
</span>
</div>
<div class="desc">
<p>Some Description 2</p>
</div>

Identifiers should be unique and is considered invalid Html.
I recommend to ensure to use either a class or data attribute to select your elements and what ever generates the Html ensures unique identifiers are used,..or leave them out all together if not needed.
However, assuming you might not be able to change the generated HTML I will be using your exact markup and only apply the least amount
of changes in the script to make it work.
For the click event you can use [id=identifier] instead of #identifier in your selector, like this $("[id=shw_desc]").click(function() {
This works as selecting by attribute can return multiple results, however, when selecting by identifier $(#...) jQuery will only return the first match.
Within the click event handler code, make sure you always stay within the current context.
This applies, regardless what selector you are using to bind the click handler.
If a shw_desc has been clicked, you don't want to process all .desc elements but only the one next to the current shw_desc that was clicked.
Same for #shw_desc_icon img, you only want to process the image located within the shw_desc that was clicked and not all the others on the page. For this you can use a selector similar to $("#shw_desc_icon img", this)
$(document).ready(function() {
var collapsed = "image";
// Select by attribute to bind to ALL shw_desc elements not just the first one
$("[id=shw_desc]").click(function() {
var $desc = $(this).next('.desc'); //Get the .desc element next to the current context.
if ($desc.is(":visible")) {
$desc.slideUp();
// Use ',this' to ensure you only query for #shw_desc_icon within the current context.
$("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(0deg)");
} else {
$desc.slideDown();
$("#shw_desc_icon img", this).attr("src", collapsed).css("transform", "rotate(180deg)");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description</p>
</div>
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="nt_selected">
<span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description 2</p>
</div>
Again, having said all that, try to get rid of the duplicate identifiers and use other common attributes of those elements to select them.
Of course, context awareness still applies just the same.

Or the idea
$(document).ready(function() {
var collapsed = "image";
$(".meclick").click(function() {
var $box = $(this).parents('.box:first');
if(!$box.find('.desc:first').hasClass('visible'))
{
$box.find('.desc:first').addClass('visible');
$box.find('.desc:first').slideDown();
$box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(0deg)");
}
else
{
$box.find('.desc:first').removeClass('visible');
$box.find('.desc:first').slideUp();
$box.find('.desc:first').find("#shw_desc_icon img:first").attr("src", collapsed).css("transform", "rotate(180deg)");
}
});
});
.visible{}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
<span>Description</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description</p>
</div>
</div>
<div class="box">
<div id="shw_desc" style="background-color: #dfdfdf;font-size: 14px;float: left;padding: 4px 12px;width: 90.3%;color: #666;" class="meclick nt_selected">
<span>Description 2</span><span id="shw_desc_icon" style="float:right;" class="glyphicon glyphicon-chevron-right"><img class="block-hider-hide" alt="Hide Administration block" src="image" tabindex="0" title="Hide Administration block"></span>
</div>
<div class="desc" style="display:none;border: 1px solid #eee;padding: 6px 12px;color: #999;font-size: 13px;width:90%;float: left;">
<p>Some Description 2</p>
</div>
</div>

How to create a list item with an icon on the left, center and right?

I am creating a ionic app that uses the Spotify API. I want to create a widget that is a list item with an icon on the left(last-song), center(play/pause) and right(next-song) icons. I'm having trouble creating a list item with the three icons. Here is my code...
<div class="list card">
<div class="item item-icon-left item-icon-center item-icon-right">
<i class="icon ion-ios-rewind"></i>
<i class="icon ion-play"></i>
<i class="icon ion-ios-fastfoward"></i>
</div>
</div>

try this :)
<div class="list card">
<div class="item item-icon-left item-icon-center item-icon-right">
<p style="float: left; width: 34%; text-align: left;">last</p>
<p style="float: left; width: 33%; text-align: center;">play/pause</p>
<p style="float: left; width: 33%; text-align: right;">next</p>
</div>
</div>

how to create some divs which has the same stylesheet?

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.

Css hover from codepen goes berzerk if html is added above

I found a great codepen for displaying team members. The problem, when you add html above it, the hover effects go berzerk. You should only get hover effects when you hover over a person (which is exactly what happens in the original code pen: http://codepen.io/solutiondrop/pen/IqKhk)
<script type="text/javascript" src="//use.typekit.net/npe3lft.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<div class="wrapper--team">
<div class="l-container">
<div class="team-grid">
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Robert Finkel</h3>
<p class="member__title">Rootmaster</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/robert-finkel_2.jpg" alt="Robert Finkel">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Randy Mosher</h3>
<p class="member__title">Alchemist</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/randy-mosher.jpg" alt="Randy Mosher">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">BJ Pichman</h3>
<p class="member__title">Operations Manager</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/mrch8596.jpg" alt="BJ Pichman">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Jacqueline Armanetti</h3>
<p class="member__title">Brand Ambassador</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/jacqueline-armanetti.jpg" alt="Jacqueline Armanetti">
</div>
<div class="team-grid__member hover">
<div class="member__info">
<div class="center-vert-content">
<h3 class="member__name">Romy Seth</h3>
<p class="member__title">Analyst</p>
<a class="member__link" href="javascript:void(0)">Read More</a>
</div>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3393/romy-seth.jpg" alt="Romy Seth">
</div>
</div>
</div>
</div>
However, when I add a little html above the original html in my own implementation, (like the two divs below the hover) behavior breaks.
<div></div>
<div><span><br>if you hover on this text on the white region over the images,
weird stuff happens. <br>The javascript should only be triggered if you hover over a person (scroll down to see)</span>
</div>
After I add my little divs above the fancy codepen stuff, the pages provides information when you hover on the new, preceding white-region, instead of when you hover over the team member. Here is the codepen showing the broken version, with the little bit of preceding html: http://codepen.io/ihatecoding/pen/zqqyVj .
Why on earth could this be happening and how do I fix it?

The problem is with your .member-info class... Use chrome developer tools to easily debug this problem.
CodePen: http://codepen.io/anon/pen/wGGNmd#0
Your CSS:
.member__info {
color: #fff;
height: auto;
width: auto;
opacity: 0;
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
background: rgba(0, 0, 0, 0.85);
backface-visibility: hidden;
transition: opacity 0.4s ease-in-out;
}
my recommendation:
.member__info {
color: #fff;
height: 184px;
width: 184px;
position: absolute;
opacity: 0;
background: rgba(0, 0, 0, 0.85);
backface-visibility: hidden;
transition: opacity 0.4s ease-in-out;
}