I have a layout structure like a row with two columns, at the page start i should see only one column with full screen width, so i set it to col-sm-12 while once an event is triggered i have to show the right side column with column set to col-sm-4 and the main column from col-sm-12 should become col-sm-8.
So the layout looks like this and i've made an example that when the col-sm-12 is clicked i'd show the other column:
$('.main').on('click', function() {
$('.main').removeClass('col-sm-12')
$('.main').addClass('col-sm-8')
$('.side').removeClass('d-none')
})
html,
body {
height: 100%;
}
.main {
background-color: #ff23;
}
.side {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm-12 main">
</div>
<div class="col-sm-4 d-none side">
</div>
</div>
</div>
At this how could i animate the column width change from col-sm-12 to col-sm-8?
i would do something like the hidden column will push the other by stretching it or any other fancy animation...
I think the transition css property should do the thing, but I am not sure. Try to set:
div[class*="col-"] { transition: .3s ease; } and let me know.
Related
I was wondering if it is possible to activate the hover effect of multiple elements to when hovering over a single element.
Use case: I want to have a section that is colourless, greyed out. When the user scrolls over the section containing all of the greyed elements, all elements smoothly transition to the on hover colours...
Example of the effect:
It is possible to do this with CSS when you set :hover selector on the parent element, something like:
.parent > div {
background: grey;
padding: 10px;
margin: 10px 0;
transition: background 0.4s;
}
.parent:hover > div {
background: blue;
}
<div class="parent">
<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
</div>
If you would need to set :hover on the child elements for some reason, you can use JavaScript.
Assuming your two sections have the classes section1 and section2, you can use something like:
$(".section1").on({
mouseenter: function () {
//choose what to do on hover
this.style.setProperty('background-color','//section1 color');
$('.section2', this)[0].style.setProperty('background-color','//section2 color');
},
mouseleave: function () {
//choose what to do on mouse leave
}
});
Is this something similar that you are looking for
children = $('.col-sm-2')
$('.col-sm-2').mouseover(function() {children.addClass('bg-danger text-white transit')})
$('.col-sm-2').mouseleave(function() {
children.addClass('exit')
children.removeClass('bg-danger text-white');
})
.transit {
transition: background-color 1s ease;
}
.exit {
transition: background-color 1s ease-out;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row border p-4 ">
<div class="col-sm-12 m-1">
Mouser over a child element below
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 1
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 2
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 3
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 4
</div>
<div class="col-sm-2 bg-secondary rounded m-1">
child 5
</div>
</div>
I've created a module for the WPBakery plugin which allows a user to drag and drop a tab item into the tab container. Just a visual of what I'm referring to:
The outer container will generate the parent and ul class, then for each new Tab Item added, it will generate a new .tab__item class, which for me houses a header and an image.
The pseudo for a .tab__item is the following:
<div class="tab__item">
<div class="tabbedContent__left">
<!-- header will be here -->
</div>
<div class="tabbedContent__right">
<!-- image will be as a background image on this div -->
</div>
</div>
When a header is hovered upon, the .tabbedContent__right will show the according image under that .tab__item.
The issue I'm having is that for each new Tab Item that is added in the backend, it will generate a new .tab__item div which obviously has its own .tabbedContent__right div. This means that when a new header is hovered upon, the .tabbedContent__right div shifts down.
It's probably better explained with a demo:
$(document).ready(function() {
$('.tabs__li .header').click(function() {
var tab_id = $(this).attr('data-tab');
$('.tab__item').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
})
// add class .active on li hover
$('.tabs__li').mouseenter(function() {
$('.tab__item').removeClass('active');
$(this).parents('.tab__item').addClass('active');
});
// Change active tab every x seconds
$(function() {
var list = $(".tab__item"),
currentActive = 0;
time = 5; //interval in seconds
setInterval(function() {
currentActive = (currentActive + 1) % list.length;
list.removeClass('active').eq(currentActive).addClass('active');
}, time * 1000);
});
})
.tabbedContent ul {
margin: 0;
padding: 0;
}
.tabbedContent__left,
.tabbedContent__right {
flex-basis: 50%;
}
.tabbedContent__left {
margin: 0;
}
.tabbedContent__left .tabs__li {
list-style-type: none;
padding-left: 10px;
}
.tabbedContent__left .tabs__li span.header {
font-size: 2.313rem;
font-family: "HelveticaNeue-bold", Helvetica, sans-serif;
color: #ABABAB;
cursor: pointer;
}
.tabbedContent .tab__item.active .tabbedContent__left li.tabs__li span.header {
color: #454544;
}
.tabbedContent__right {
display: none;
min-height: 325px;
background-repeat: no-repeat;
background-size: contain;
}
.tabbedContent .tab__item.active .tabbedContent__right {
display: block;
}
<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="tabbedContent">
<ul class="tabs d-flex flex-column">
<!-- container for 1 -->
<div class="tab__item d-flex flex-column flex-md-row active">
<div class="tabbedContent__left">
<li class="tabs__li" data-tab="tab-1">
<span class="header"> Header </span>
</li>
</div>
<div class="tabbedContent__right" id="tab-1'" style="background-image:url(http://oi68.tinypic.com/5a50me.jpg);"></div>
</div>
<!--------->
<!-- container for 2 -->
<div class="tab__item d-flex flex-column flex-md-row active">
<div class="tabbedContent__left">
<li class="tabs__li" data-tab="tab-2">
<span class="header"> Header 2 </span>
</li>
</div>
<div class="tabbedContent__right" id="tab-2'" style="background-image:url(http://oi65.tinypic.com/2zdr4f7.jpg);"></div>
</div>
<!--------->
<!-- container for 3 -->
<div class="tab__item d-flex flex-column flex-md-row active">
<div class="tabbedContent__left">
<li class="tabs__li" data-tab="tab-3">
<span class="header"> Header 3 </span>
</li>
</div>
<div class="tabbedContent__right" id="tab-3'" style="background-image:url(http://oi68.tinypic.com/5a50me.jpg);"></div>
</div>
<!--------->
</ul>
</div>
Working JSFiddle here
As you can see with the above demo, the height (and presence of multiple) .tabbedContent__right divs, is causing a gap between the headers.
What I want to do:
I cannot alter the markup structure (i.e. tab__item must have tabbedContent__left and tabbedContent__right). But I don't want multiple .tabbedContent__right divs to be generated, only the one. So something like this:
Is there a way I can manipulate my current markup to only show one but still function as it does in the demo via JS?
More info:
What does the JS that creates the divs look like?
I haven't created any JS for this (because I wasn't sure if it was the best approach). All my JS regarding this module is in the demo above.
After I drag and drop a tab item into the container, what happens?
This is how the backend of the module looks like:
When a Tab Item is added, the following markup is generated:
<div class="tab__item">
<div class="tabbedContent__left">
<span class="header">' . $tab_header . '</span>
</div>
<div class="tabbedContent__right" style="background-image:url('.$background_img.');"></div>
</div>
I'm setting up a new plugin datepicker in my laravel project
and want to fix responsive issue when resizing to mobile view
this is my customization codes that i select from datepicker creator offer list in his site :
$(function() {
$("#input1").persianDatepicker({
theme: 'melon',
alwaysShow: 1,
cellWidth: 36,
cellHeight: 20,
fontSize: 15,
calendarPosition: {
x: 0,
y: -93,
},
});
});
and this is div structure that i put datepicker inside it :
<div class="container-fluid">
<div class="container">
<div class="row my-4 justify-content-center">
<div class="col-xl-3">
<div class="card bg-light py-4 mb-3">
<div class="bg-light py-5">
<div class="py-5 bg-light">
<div id="input1"></div>
</div>
</div>
</div>
<div class="card bg-primary py-4"></div>
<div class="card bg-primary py-4"></div>
</div>
<div class="col-xl-9">
</div>
</div>
</div>
</div>
in laptop view i have picture below :
and in mobile view (iphone 6/7/8) i have picture below :
so i think you can understand what is my problem
the problem is when someone open my page in mobile the calendar went to left and i dont know
how to tell calendar box follow the parent div size and always fit and full size inside parent like
laptop view
For More Inforamtion This is Publisher of this plugin :
Datepicker
Add this css:
#input1 {
width: 100%;
}
or you could do it like this:
<div id="input1" style="width:100%;"></div>
Try adding this CSS.
// only apply style on mobile
#media only screen and (max-width: 320px) {
.pdp-default {
// Set calendar parent element to 100% width
width: 100%;
// Override inline left position set by plugin
left: 0!important;
}
.pdp-default .cell {
// set percent width of calendar date cells 7/100 = 14.28571428571429
width: 14.28571428571429%!important;
// Style calendar dates to stay at required aspect ratio
height: 0!important;
padding-bottom: 8%;
}
}
I have a dashboard type page on the left i have tabs & right i have content of the respective tab. I am using bootstrap so i made 2 columns 1 for tab & other for it's contents but my problem is that the border of tabs is not covering the entire height of the content i want it to cover the full height so i have written a jquery that will set the height of the last tab ("#ws") but that work only on page load not on button click.
TLDR
1) Go to http://kwebmakerusa.com/whp/v3/dashboard.html
2) Can you see the border-right of the tab it's height is same as the content on the right
3) click any other tab eg:address book. Notice the height shrinks
What i am trying to do is keep the height same as the content on the right
here is my html :
<div class="col-md-2 col-sm-3 hidden-xs nopadding">
<div id="dtnavs">
<div class="col-md-12 tabtxt active" id="dasht">My Dashboard</div>
<div class="col-md-12 tabtxt" id="cartt">My Cart</div>
<div class="col-md-12 tabtxt" id="addresst">Address Book</div>
<div class="col-md-12 tabtxt" id="ordert">My Orders</div>
<div class="col-md-12 tabtxt" id="wisht">My Wishlist</div>
<div class="col-md-12 tabtxt" id="newst">Newsletters</div>
</div>
<div class="col-md-12 tabtxt" id="ws"></div><!--set height dynamicaly-->
</div>
On click
$("#addresst,#mtab3").click(function() {
$('#dashboardtab,#carttab,#ordertab,#wishtab,#newslettertab,#video').slideUp(500);
$('#addtab').slideDown(500);
$(".dashnav").find(".active").removeClass("active");
$(this).addClass("active");
setwsheight("#addtab");
$(".ccatname,#bcactive").text("Address Book");
console.log(this);
return false;
});
setwsheight();
function setwsheight(sh){
$('#ws').delay(1000).height($(sh).height()-$('#dtnavs').height());
var str = "$('#ws').height($("+sh+").height()-$('#dtnavs').height())";
console.log(str);
console.log(sh+" height : "+$(sh).height());
console.log("dtnavs height : "+$('#dtnavs').height());
console.log("WS height :" +$('#ws').height());
};
without jquery
I have change some Your HTML Code Like
Remove this class in content tab left40
Apply this css your content side parent content like col-md-10 col-sm-9 col-xs-12 nopadding
.selector {
border-left: 1px solid #ccc;
margin-left: -1px;
padding: 0 0 0 40px;
}
apply this css tab content col-md-2 col-sm-3 hidden-xs nopadding
.selector{
background: #fff none repeat scroll 0 0;
position: relative;
z-index: 999999;
}
Try this.
var newHeight=your calculation;
$('#ws').animate({
height:newHeight+"your unit"
},yourDelay,function(){});
Also if that still doesn't work, try making the #ws element's position property absolute in a CSS file, along with the code posted in this answer.
I have a bootstrap row with 3 columns nested within a container which I'd like to give a height of 100% for each row, applying vertical scrolling if they overflow.
Current Layout
DOM
<body>
<div id="wrapper">
<nav...
</nav>
<div id="page-wrapper" class="container-fluid">
<div class="content" ui-view>
<!-- content starts here (loaded by angular)-->
<div class="row">
<div class="col-md-4 nopadding">
...
</div>
<div class="col-md-4">
<!-- example column content -->
<div class="list-group">
<a class="list-group-item" ng-repeat="..."></a>
</div>
</div>
<div class="col-md-4 nopadding">
...
</div>
</div>
<!-- content ends here -->
</div>
</div>
...
I tried a lot of things now, e.g. negative margins, absolute positioning, displaying the columns as table/table-cells. However everytime the content populates, the list groups expand to the height they need for displaying all items, pushing the whole site down.
Based on other examples, it should work this way (it does not, though -> has no effect):
body, html {
height: 100%;
}
.table-row { // applied to "row"
display: table;
> [class*="col-"] { // applied to columns
vertical-align: top;
float: none;
display: table-cell;
}
}
.overflow-auto { // applied to the list groups inside the columns
height: 100% !important;
display: block;
overflow-y: scroll;
}
Anyone got an idea about how to solve this?
Examples tried:
How to make bootstrap column height to 100% row height?
Twitter bootstrap 3 two columns full height
Setting 100% height to columns in Twitter Bootstrap
Bootstrap 3 - 100% height of custom div inside column
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height