So i have recently picked up a site from a friend and i am in the process of rebuilding it using the original bootstrap v3 that was originally put in place. I have added the .collapse class onto a div to hide it away until clicked but when it is clicked the box doesn't stay open just drops down and then immediately goes back to being closed.
If i watch the steps of what happens using the inspect tool in chrome i can see the class starts as 'collapse' changes to 'collapsing' and applies the css styles relevant and then finishes as 'collapse in'. However the box has closed and the 'collapse' class is back to being applied to the div even though it is displaying as 'collapse in'.
<div class="collapse" id="facebookreviews">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-2">
<imgsrc="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
</div>
</div>
<div class="spacer-25">
</div>
<div class="row">
<div class="col-xs-12 text-center">
<button class="btn btn-black" type="button" data-toggle="collapse" data-target="#facebookreviews" aria-expanded="false" aria-controls="facebookreviews">Click to view more
</button>
</div>
</div>
.collapse {
display: none;
&.in { display: block; }
.collapsing {
position: relative;
height: 0;
overflow: hidden;
#include transition-property(height, visibility);
#include transition-duration(.35s);
#include transition-timing-function(ease);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
!https://i.imgur.com/veYWYoZ.png
I loaded your HTML into a file, put the CSS in a CSS, and linked the CSS...
I also put bootstrap 3 css in at the top and jquery and bootstrap.js files in a script tag at the bottom...
I was able to get them to collapse just fine both with putting your collapse div with a container and without a container class.
is jquery and bootstrap.js loaded at the bottom?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="testing.css">
</head>
<body>
<div class="container collapse" id="facebookreviews">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-2">
<imgsrc="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
<div class="col-xs-12 col-sm-4 col-md-2">
<img src="img/testimonial.jpg" alt="Testimonial image" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-8 col-md-2">
<p>After my series of treatments with Inch Go Lipo, I lost 6” off my waist! Thanks Inch Go Lipo!</p>
<p><strong>Stacey, Shropshire</strong></p>
</div>
</div>
</div>
<div class="spacer-25">
</div>
<div class="row">
<div class="col-xs-12 text-center">
<button class="btn btn-black" type="button" data-toggle="collapse" data-target="#facebookreviews" aria-expanded="false" aria-controls="facebookreviews">Click to view more
</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Collapse Working
Collapse Working Pt 2
Related
thumbnail screenshot also attachedi have created thumbnail in my dashboard.but these thumbnails are collapsing each others and the last thumbnail in a row showing up full screen.kindly help me
<div class="container">
<h1>Trending Groups</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
</div>
</div>
Try giving height and width to your image also dearch in google little bit and then post your questions on this that will help you.
here's the issue:
Using Bootstrap 3.3.7
I have 6 images (3 icons and 3 progress bars) and wish to have the 2 last ones go to the next line when reducing the window size from col-lg to col-md (making my site as responsive as possible.) The issue is that it does not, here's the code:
<!DOCTYPE html>
<html>
<head>
<!-- Boostrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<section>
<div class="container langages" id="skills">
<div class="row iconskills">
<!-- HTML -->
<div class="col-xs-6 col-sm-offset-1 col-sm-1 col-md-offset-1 col-md-1 col-lg-offset-1 col-lg-1">
<img class="logohtml" src="img/logos/html5.png" alt="logo html5" />
</div>
<div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3"></div>
<!-- CSS -->
<div class="col-xs-6 col-md-offset-2 col-md-1 col-lg-offset-0 col-lg-1">
<img class="logocss" src="img/logos/css32.png" alt="logo css3" />
</div>
<div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3"></div>
<!-- BOOTSTRAP -->
<div class="col-xs-6 col-sm-1 col-lg-1">
<img class="logobs" src="img/logos/bootstrap.png" alt="logo bootstrap" />
</div>
<div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2"></div>
</div>
</div>
</section>
<footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</footer>
</body>
</html>
I added 2 screenshots showing what is happening:
Before
After
What is strange is that bootstrap has a grid made of 12 columns, when I check in my divs in col-md I have those 12 columns in my first 4 divs (which is what I want since I want the 2 last to go to the next line) but the behavior is not what I'm expecting.
I'm probably missing something obvious but help would be great, thanks !
Don't hesitate if I'm not clear or missing some infos.
I think you are trying to achieve below layout. My views are that you should get familiar with bootstrap built in components(classes). I have changed little bit code of yours, you can further edit it and reference your correct path for images.
Bootstrap 3.3 : https://getbootstrap.com/docs/3.3/components/
Some reference css links that I have used in build
Progress bar : https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
Grid : https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
Image responsive : https://www.w3schools.com/bootstrap/bootstrap_images.asp
HAPPY CODING : All the best for you resume, do share the link once it is completed.
<!DOCTYPE html>
<html>
<head>
<!-- Boostrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<section>
<div class="container langages" id="skills">
<div class="row iconskills">
<!-- HTML -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logohtml" src="./img01.png" alt="logo html5" />
</div>
<div id="progressHtml" class="col-xs-6 col-sm-3 col-md-5 col-lg-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
<!-- CSS -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logocss" src="./img01.png" alt="logo css3" />
</div>
<div id="progressCss" class="col-xs-6 col-sm-3 col-md-2 col-lg-3">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
<!-- BOOTSTRAP -->
<div class="col-xs-12 col-sm-4">
<div class="col-xs-6 col-sm-offset-1 col-sm-8 col-md-offset-1 col-md-8 col-lg-offset-1 col-lg-8">
<img class="img-responsive logobs" src="./img01.png" alt="logo bootstrap" />
</div>
<div id="progressBs" class="col-xs-6 col-sm-3 col-lg-2">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
</footer>
</body>
</html>
Thanks a lot for your answer!
The simple fact of adding a new div around each languages helped me sort my problem out!
Thanks again!
I'm trying to activate a link when the mouse button is pressed down but before it is released.
example code http://codepen.io/MHUMPHRI/pen/GqJGre?editors=1010re?editors=1010
In my example code the content in the RHS tabs is displayed when the LHS link is selected and the mouse button is released. I'd like the tab content to be displayed as soon as the mouse button is pressed down. Grateful for any help. Mike
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<div class="container-fluid">
<div class="row">
<div class="nopadding col-xs-4">
<a class="active" data-toggle="pill" href="#content1">
<div class="blue-box col-xs-12">
<h1>box1<h1>
</div>
</a>
<a data-toggle="pill" href="#content2">
<div class="blue-box col-xs-12">
<h1>box2<h1>
</div>
</a>
<a data-toggle="pill" href="#content3">
<div class="blue-box col-xs-12">
<h1>box3<h1>
</div>
</a>
</div>
<div class="nopadding col-xs-8">
<div class="tab-content">
<div id="content1" class="tab-pane fade in active">
<div class="col-xs-12 grey-box">
<h1>output1<h1>
</div>
</div>
<div id="content2" class="tab-pane fade">
<div class="col-xs-12 grey-box">
<h1>output2<h1>
</div>
</div>
<div id="content3" class="tab-pane fade">
<div class="col-xs-12 grey-box">
<h1>output3<h1>
</div>
</div>
</div>
</div>
since you imported jQuery, here's a jQuery solution:
first, start off your jQuery with $(document).ready(function() { ... });
then add code:
var pills = $('a[data-toggle="pill"]');
pills.mousedown(function() {
this.click();
});
this way, whenever you click-and-hold (.mousedown) you will call an entire .click event on the same element.
I have an accordion to hide blog posts in a webpage. I have a downwards arrow which I want to rotate to an upwards arrow when a blog post (accordion section) has been opened. These should be independent of other arrows attached to other posts obviously.
I am using bootstrap framework as a base. I tried following the instructions here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h , along with what I already know/have used to try to add rotation. My problem is that, as I'm not using a button (the whole blog post is clickable to expand and collapse it), I can't work out what I need to put in the javascript where the question marks are.
(adding a data-target attribute to the tag breaks the expandability of the post).
$(" ??? ").on("hide.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
$(" ??? ").on("show.bs.collapse", function(){
$('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
expand-image.text-center.glyphicon.glyphicon-chevron-down.turn-arrow {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<a class="blog" data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 25th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body" >
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes
This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
<a class="blog collapsed" data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="panel">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<div class="row">
<div class="container col-md-12 heading-container">
<div class="col-md-1 col-sm-2 text-center">
<h3 class="date-text">Jun 26th</h3>
</div>
<div class="col-md-11 col-sm-10">
<h3>This is where the post title goes</h3>
</div>
</div>
</div>
</h4>
</div>
<div class="panel-teaser panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the description goes. This should be the blog post's first paragraph (which needs to be catchy, no images here though)
</div>
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<div class="row">
<div class="col-md-1">
</div>
<div class="container col-md-11">
This is where the main text body goes.
This should be the rest of the blog post, images and all)
</div>
</div>
</div>
</div>
<span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
<hr>
</div>
</a>
</div>
You can attach the eventHandler on any Element, that is one of the parent Elements of .collapse. This is because the Event is triggered on the .collapse Element and bubbles all the way uppward. You can read more about event bubbling here.
You could, for example, attach the eventHandler to every Element with class "blog" as I did to solve your problem.
Relevant jsFiddle
$(".blog").each(function () {
$(this).on("hide.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});
$(this).on("show.bs.collapse", function () {
$(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
});
Note the .each at the beginning. This attaches a different eventHandler to every Element matching the selector.
Now you can search the icon to be rotated in this Element --> $(this).find(
This will only find the one arrow inside the clicked blog element.
A very detailed explanation can also be found in this post.
I created a grid with col-md-7 on the left and col-md-5 on the right.
And I put images to the col-md-5, which are responsive and in col-md-12 width - full width
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-7">LEFT SIDE</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Demo : http://jsfiddle.net/r8rFc/298/
It works great without any problems.
However, I use a menu called Zozo UI tabs.
When I put my code into Zozo UI container div, the images overlap rather than staying on top of each other.
Thus, it just show the last IMG
I would add the whole code to here but unfortunately it has a lot of dependencies.
Please check from here.
xxx
<!-- Overview -->
<div class="z-content z-active" style="position: relative; display: block; left: 0px; top: 0px;">
<div class="z-content-inner">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-12">
LEFT
</div>
</div>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
<div class="col-md-12">
<img class="img-responsive" src="http://patdollard.com/wp-content/uploads/2014/07/ap_holder_121003_wg.jpg" alt=""/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Need a way to get that images on the top of each other rather than overlapping.
You have
.productgroup img {
position: absolute;
}
it seems to be the reason of your problem.