I've got the following div structure which I created using bootstrap. The html markup is as following.
<section class='content-wrapper order-summary-wrapper'>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 order-summary-details">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div>
<h4>Delbetalning Engångskostnad</h4>
<p>150kr/mån</p>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<h4>Abonnemang</h4>
<p>199kr/mån</p>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class='price-container-wrapper'>
<div class='price-container'>
<h4>Månadskostnad</h4>
<p>199kr</p>
</div>
<div class='clearfix'></div>
<div class='price-container price-container-padding'>
<h4>Bindingstid</h4>
<p>0 mån</p>
</div>
<div class='clearfix'></div>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class='price-container'>
<h4>Månadskostnad</h4>
<p>199kr</p>
</div>
<div class='clearfix'></div>
<div class='price-container price-container-padding'>
<h4>Bindingstid</h4>
<p>0 mån</p>
</div>
</div>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
Rensa
Beställ
</div>
</div>
</div>
</section>
And I've styled it to look like in the following mockup.
Now what I've to do is when I click on each arrow icon the respective box should expand as below.
The height of each container is dependent on the content inside. I've tried making the container position:absolute and then using jQuery slideDown,slideUp methods. But this doesn't work as expected since when I make a container position:absolute the other neighboring containers stack on the left. How can I achive this effect using css + jquery. Or is it possible with CSS only?
will provide the current CSS of the containers if necessary.
following is the fiddle of the container. I've added the entire css since couldn't filter out the exact css needed for this bit of elements.
fiddle
If I get you right, you can do it with bootstrap:
http://getbootstrap.com/components/#navbar
I apologize but I don't have time to realize the all think.
I can quickly show you a way it can be done, you will have to adapt it and make it better.
Try add this to your fiddle:
CSS:
.col-xs-3{
border:2px solid black;
overflow:hidden;
max-height:50px;
-webkit-transition:max-height 0.4s ease 0s;
-moz-transition:max-height 0.4s ease 0s;
transition:max-height 0.4s ease 0s;
}
/*
.col-xs-3:hover{
max-height:400px;
}
*/
JS: (this is vanilla js no-jquery)
-- make sure you select "no wrap - in < head > "-- top/left in fiddle
window.addEventListener("load",function(e){
var m = document.getElementsByClassName("col-xs-3");
for(var i=0; i<m.length; i++){
m[i].isOpen = false;
m[i].addEventListener("click",function(e){
if(this.isOpen){ this.style.maxHeight = "60px"; this.isOpen = false; }
else{ this.style.maxHeight = "400px"; this.isOpen = true; }
},false);
};
},false);
Related
I have a screen like this:
So what I am trying to do is when the CLICK button is clicked, return the image on the right and show the result box (which is div).
So the section is like this:
<section class="weight__calculations">
<div class="container calculations__content">
<div class="row contents">
<div class="col-lg-2 col-md-12 col-sm-12"></div>
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="form-group">
<div class="calorie__button__area">
<button
type="submit"
class="button-secondary button__calculate"
>
HESAPLA
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="result__box">
<div class="title">RESULT</div>
</div>
</div>
</div>
</div>
</section>
And I hided calculate__content__result in css:
.calculate__content__result {
display:none;
}
But I dont know how to show it again and display none picture with the return effect.
Thanks for your help.
check this out it may help in your needs... Same time you toggle the class name of image too.
css
.calculate__content__result_show{
display : block ;
}
jquery
$(document).on('click','.click',function(){
$('.calculate__content__result').toggleClass('calculate__content__result_show');
});
javascript
var clickBtn = document.querySelector('.click');
var result = document.querySelector('.calculate__content__result');
clickBtn.addEventListerner('click',function(){
result.classList.toggle('calculate__content__result_show');
});
Add an ID in the element you want to hide/show
<div id="imageDiv" class="col-lg-6 col-md-12 col-sm-12 calculate__content">
and add functions to hide/show with javascript at the the begining of the html
<script>
function showImage(){
document.getElementById("imageDiv").style.display = "block";
}
function hideImage(){
document.getElementById("imageDiv").style.display = "none";
}
</script>
Call the functions when needed, for example:
<button onclick="showImage()" class="button-secondary button__calculate">
Click
</button>
i am trying to make a whole div clickable, i did the following
<a href=""><div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">Electronics</h3>
<div class="view">(19,805)</div>
</div>
</div></a>
but he div is not becoming clickable, can anyone please tell me whats wrong in my code?
Try
<div class="col-lg-3 col-md-6 col-sm-6 col-12 item-mb" onClick="javascript:window.location='//stackoverflow.com'">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">Electronics</h3>
<div class="view">(19,805)</div>
</div>
</div>
First of all, you can't have a div inside a. I mean, technically in some environments it works, but its against specification, so you can't rely on that structure. If you want to have a div wide link you better have your a absolutely positioned and stretched to fit your div
You can use javascript, in the code below I created a function that adds click event handlers instead of using a tags which can't be put inside each other.
Also included an example of how to style the div (see clickable css class).
function addLink(divId, url){
let div = document.getElementById(divId);
div.setAttribute('data-link-url', url);
link1.addEventListener('click', function(e){
window.location = this.getAttribute('data-link-url');
});
}
addLink('link1', 'https://stackoverflow.com');
.clickable{
cursor: pointer;
}
<div id="link1" class="clickable">
<div class="service-box1 bg-body text-center">
<img src="img/service/service1.png" alt="service" class="img-fluid">
<h3 class="title-medium-dark mb-none">text</h3>
<div class="view">(19,805)</div>
</div>
</div>
For my current project I want to make a sort of fixed element in my DOM.
I am not using position: fixed because the element will lose its existence within the DOM and thus its original position (which in my opinion only makes things look worse). I made the element behave like a fixed element by just adding/removing margin-top: somevalue to the scrollable element, everytime when the user scrolls and the code I use was made possible within the JavaScript. Using this method also adds a nice looking animation to this whole "interaction".
The problem I am experiencing is that when the (browser) window has such a small height, that the element will reach for the footer, it will expand the container, body or whatever parent is on it. How do I prevent this from happening?
I made a JSFiddle per example of this issue.
$(document).ready(function() {
var topPadding = 10;
//Set the scrollable offset before starting the scroll
var scrollableTopOffset = $(".scrollable").offset().top;
$(window).scroll(function() {
/* When scrolling, determine wether the browser window still contains
scrollable: */
if (scrollableTopOffset < $(window).scrollTop()) {
//Code when scrollable is within the browser window...
//$(".shopping-cart").addClass("scrollable-fixed");
$(".scrollable").stop().animate({
marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding
});
} else {
//Code when scrollable is not within the browser window...
//$(".shopping-cart").removeClass("scrollable-fixed");
$(".scrollable").stop().animate({
marginTop: 0
});
}
});
});
.some-content-block {
height: 150px;
margin-bottom: 5px;
background-color: red;
}
.scrollable {
height: 75px;
background-color: cyan;
}
footer {
height: 200px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://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" />
<div class="container" style="background-color: blue;">
<div class="row">
<div class="col-md-12">
<div class="some-content-block">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-10">
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
<div class="col-md-4">
<div class="some-content-block">
</div>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="scrollable">
</div>
</div>
</div>
</div>
<footer></footer>
Edit: Here is my fiddle updated with the answer of SamGhatak: JSFiddle
I think I found a solution here:
https://jsfiddle.net/rv4mg8uq/2/
Added this code there:
if(($('footer').offset().top -scrollableTopOffset +topPadding)<$(window).scrollTop()){
//do nothing
}
I wan to know if it's possible to re-order vertical columns on Bootstrap 3.
.col-xs-8 {
background: magenta;
}
.col-xs-4 {
background: cyan;
}
.col-xs-12 {
background: yellow;
}
<div class="container">
<div class="row">
<div class="col-xs-8">Content</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12 col-xs-push-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<div class="col-xs-12">D</div>
</div>
</div>
</div>
</div>
JSFiddle
What I want it's to move the items on the sidebar from ABCD to BCAD
What you want to achieve can not be done for responsive layout.....but assuming you have static content then, it can be done using margins :
Here is a demo
Wrap your ordering divs in some parent div and apply responsive layout to it....in the demo, i have dome that through abcd class ( its not responsive though since its in pixels)
HTML
<div class="abcd">
<div class="col-xs-12 " style="margin-top:-110px;color:#000">A</div>
<div class="col-xs-12" style="margin-top:-150px;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-130px;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-90px;color:#000">D</div>
<div>
EDIT :
demo with percentage value
In %ge, you can vreate something like :
<div class="abcd">
<div class="col-xs-12" style="margin-top:-13%;color:#000;">A</div>
<div class="col-xs-12" style="margin-top:-33%;color:#000">B</div>
<div class="col-xs-12" style="margin-top:-23%;color:#000">C</div>
<div class="col-xs-12" style="margin-top:-3%;color:#000">D</div>
<div>
CSS
.abcd {
margin-top:33%;/* keep this equal to margin of B, but with opposite sign */
}
Assuming you have to insert first child just before the last child.
You can do it with jquery. See Demo
$( ".flexbox div:first" ).append().insertBefore( ".flexbox div:last" );
I'm sure the answer is really simple, but I can't figure this out :
http://jsfiddle.net/VfQAH/
I have a bunch of divs in a table style layout like so :
<div class="row">
<div class="col boxname">Box Name</div>
<div class="col length">Length</div>
<div class="col width">Width</div>
<div class="col height">Height</div>
</div>
<div class="row">
<div class="col boxname">A</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
<div class="row">
<div class="col boxname">B</div>
<div class="col length">1</div>
<div class="col width">2</div>
<div class="col height">3</div>
</div>
I want rows to change color on hover, for that I have :
.row :hover{
background: #003366;
}
But the background changes only on the hovered cell, instead of the whole row.
Do I have to use JS to make it happen like I want, or is there a simple CSS trick that I don't know?
You'd use .row:hover instead of .row :hover to highlight the whole row.
.row:hover{
background: #003366;
}
Your original selector, .row hover, selects all hovered elements which descend from .row, instead of .row itself.
jsFiddle here.
You need to remove the space
.row:hover{
background: #003366;
}
Otherwise it is interpreted as
.row *:hover{
background: #003366;
}
jsFiddle