Develop Reference

Make div stayed in the same position

How can I make a div tag stay the same location with the same size? I have the following code to display information using left and right pane called group-left and group-right. When the content of group-right changes the group-left height changes. I want a fixed size and fixed position if the content grows.
<div class="pane even">
<div class="group-left bg-highlight" style="top: 0px;">
<div class="pane-content">
<p class="m-t-md">
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="fa fa-check-circle"></i>#item.PartyName
<ul class="list-unstyled m-x-md m-b-md">
<li data-expanded="true"> <i class="fas fa-check-circle">
</i> #item.ContactName </li>
</ul>
</li>
}
</p>
</div>
</div>
<div class="group-right" style="top: 0px;">
#foreach (var item in rpInfo)
{
<div class="card card-understated">
<div class="card-heading">
<h4>#(Localizer["Contact Preview "])</h4>
</div>
<div class="card-body">
<p>
#item.ContactName<br>
#item.ContactTitle<br>
#item.AddressLine1<br />
#item.City, #item.State #item.Country
</p>
</div>
</div
}
</div>
</div>
Here is what the CSS section looks like:
.group-left, .group-right {
float: none;
min-height: 320px;
vertical-align: middle;
position: relative;
margin: 0;
padding: 0;
}
I have this javascript code to make a treeview and to handle the Onclick event:
<script>
$(document).ready(function () {
$("#treeview").kendoTreeView();
$(".panel-handler ").click(function () {
let id = $(this).data("id");
if ($("#" + id).css('display') === 'none') {
$(".rpspanel ").slideUp();
$("#" + id).slideDown();
}
});
});
</script>

You have only set a min height on the divs, you need to specify a height if you want it to remain the same size, eg: "height: 300px". If you want the divs to be fixed on the page, meaning locked to that position and won't move even if you scroll, you need to apply "position: fixed".

Change the size of header input item on clarity design

I'm using an header bar from the clarity.design examples, I tinkered with it trying to make the search input occupy 100% of the center of the header bar, but I'm unable to do it.
The code:
<clr-header class="header-6">
<div class="branding">
<a [routerLink]="['/']" routerLinkActive="router-link-active" class="nav-link">
<span class="title">Project Clarity</span>
</a>
</div>
<form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm">
<label for="search_input"></label>
<input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required>
</form>
<div class="header-actions">
<div class="header-nav" [clr-nav-level]="1">
<a class="nav-link nav-text">
My menu
</a>
</div>
<clr-dropdown>
<button class="nav-icon" clrDropdownTrigger>
<clr-icon shape="user"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a clrDropdownItem>Preferences</a>
<a clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</clr-header>
This is how it looks like, I want the header to use all the remaining width.
Thanks.

The header is using flex box for layout.
Here is a POC stackblitz that uses the below css to override the default search styles.
CSS
.search {
border: 1px solid deeppink;
flex: 1 1 auto;
max-width: none;
}
.search > label {
flex: 1 1 auto;
max-width: 90%;
}
.search > label > input {
width: 100%;
}
It should give you a starting point to tweak for your apps visual style. You may also need to address the responsive use case.

The solution of your problem is CSS.
I gave you an example below that shows you where you can start from.
Let me know if this helps you out.
/* First, make your elements float to the left or right */
.header-6 div
, .header-6 form {
float: left;
}
div.header-actions{
float: right;
}
/* Then give them some space */
div.branding
, form.search
, div.header-actions {
padding-left: 20px;
padding-right: 20px;;
}
/* The rest is using FontAwesome and CSS to add the icons and the other stuff */
<clr-header class="header-6">
<div class="branding">
<a [routerLink]="['/']" routerLinkActive="router-link-active" class="nav-link">
<span class="title">Project Clarity</span>
</a>
</div>
<form class="search" (ngSubmit)="onSearchSubmit(f)" #f="ngForm">
<label for="search_input"></label>
<input id="search_input" name="search_input" type="text" placeholder=" Search for keywords or paste link..." ngModel required>
</form>
<div class="header-actions">
<div class="header-nav" [clr-nav-level]="1">
<a class="nav-link nav-text">
My menu
</a>
</div>
<clr-dropdown>
<button class="nav-icon" clrDropdownTrigger>
<clr-icon shape="user"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a clrDropdownItem>Preferences</a>
<a clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</clr-header>

Clearing a div which is used by mixitup filter

I have used mixitup js to filter the plugin type in which each div is wrap in a column.
The main point is I can't use clear: both; CSS property.
I have achieved this issue in other sites by using
.parent-class .column-class:nth-of-type(3n+1){
clear:both;
}
But in mixitup I cannot target the nth item because of the filter, If I click in free tab than the nth item which I was targeting will be replaced by other div.
you can view the issue in this link but make sure your browser width is less than 1100px and more than 992px
Due to the long text of contact form 7 which comes in 2 lines the height of the div is more than others. I want to target 4th element for min-width: 992px; and clear that div.
HTML structure is :
<section class="plugin-listing-page">
<div class="col-sm-12 no-padding">
<div class="wrap">
<div class="plugin-type">
<ul id="filters" class="clearfix post-filter-controls">
<li><span class="filter active-onload theme-demo btn-default" data-filter=".all">All</span></li>
<li><span class="filter theme-demo btn-default" data-filter=".free">Free</span></li>
<li><span class="filter theme-demo btn-default" data-filter=".premium">Premium</span></li>
</ul>
</div>
<div class="filtr-container" id="pluginlist">
<div class="col-md-4 col-sm-6 all listplugin free" data-bound="">
<div class="single-plugin-list">
<div class="single-plugin-list-image">
<a href="">
<img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
</a>
</div>
<div class="single-plugin-list-content">
<h4 class="text-title">Test</h4>
<a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
<span class="theme-green pull-right">Free</span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 all listplugin premium" data-bound="">
<div class="single-plugin-list">
<div class="single-plugin-list-image">
<a href="">
<img src="https://pippinspluginscom.c.presscdn.com/wp-content/uploads/2011/09/plugin.png" >
</a>
</div>
<div class="single-plugin-list-content">
<h4 class="text-title">Test</h4>
<a class="theme-demo btn-default animate-arrow pull-left" href="#">View Detail<span class="dashicons dashicons-arrow-right-alt"></span></a>
<span class="theme-green pull-right">Free</span>
</div>
</div>
</div>
</div>
</div>
</div>
JS for mixitup is:
jQuery(document).ready(function ($) {
jQuery.noConflict();
(function ($) {
$(function () {
var filterList = {
init: function () {
$('#pluginlist').mixItUp({
selectors: {
target: '.listplugin',
filter: '.filter'
},
load: {
filter: '.tables' // show app tab on first load
},callbacks: {
onMixEnd: function(state) {
if(state.activeFilter == '.listplugin')
$('.wil').addClass('active')
}
}
});
}
};
filterList.init();
});
setTimeout(function(){
$('#filters li .active-onload').click();
},100);
})(jQuery);
});
Is there any solution for clearing the height of the div so that it always floats left of the browser ?

There are many ways we can solve this issue. However, I would go for css based approach
#media (min-width: 992px) and (max-width: 1100px){
.single-plugin-list-content h4 a{
font-size: 90%; // or smaller
}
}
UPDATED:
If you can use flex then this will fix the issue. It should work on all screens. However you can add this to min-width: 992px media query. The decision is yours.
#pluginlist{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

Change background color of individual div when clicked in a row of 5 and reset when another is clicked?

I have found alot of useful answers on this website when i have got stuck and now i find myself lost as I'm pretty new to this and don't know any javascript.
I am trying to add a feature to my website that will include 5 buttons that reveal a div underneath for each button (I have the code for the toggle of this that's okay but!!
This is going to probably sound so easy to you guys but how can I change the background color when the div is clicked on and then reset it if they click one of the other divs, this should work on each of the 5.
<style type="text/css">
.btnmtb{
margin-right: 5px;
touch-action: manipulation;
cursor: pointer;
background-color: #1E2327;
padding: 20px 0px;
text-align: center;
}
.btnmtb h1 {
color: #fff;
}
.btnmtb h4 {
color: #fff;
}
.btnmtb p {
color: #fff;
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
padding: 0px 20px 0px 20px;
}
</style>
<div class="disciplines">
<div class="row">
<div class="btnmtb col-md-2 col-md-offset-1 box1">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Cross Country</h1>
<h4>Hardtail - 100/120mm</h4>
<p>eMountain Bikes designed for light offroad trails</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box2">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Cross Country</h1>
<h4>FullSus - 100/120mm</h4>
<p>Fast paced eMTB's designed for light trail with rear suspension</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box3">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Trail</h1>
<h4>FullSus - 140/150mm</h4>
<p>Mid Travel - perfect weapons for the more ambitious eMTB rider</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box4">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Enduro</h1>
<h4>FullSus - 160/170mm</h4>
<p>eMountain bikes with long travel designed for the toughest terrain</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box5">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Fatbike</h1>
<h4>Large Tyres - 100/120mm</h4>
<p>The eMountain bikes that look like they have dropped out of a comic book</p>
<i class="fa fa-chevron-down"></i>
</div>
</div>

Please use this javascript code (Updated)
var elements = document.getElementsByClassName('btnmtb');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
for (var j = 0; j < elements.length; j++) {
if (elements[j].hasAttribute("style")) {
elements[j].setAttribute('style', '');
}
}
this.style.backgroundColor = "red";
}, false);
};

HTML
<body>
<div class="container">
<div style="background-color:red;width:50%" class="element active">
Red
</div>
<div style="background-color:yellow;width:50%" class="element">
Yellow
</div>
<div style="background-color:blue;width:50%" class="element">
Yellow
</div>
<div style="background-color:black;width:50%" class="element">
Yellow
</div>
<div style="background-color:white;width:50%" class="element">
Yellow
</div>
</div>
</body>
JavaScript+JQuery
$(".element").on("click",function()
{
$(".element").removeClass("active");
$(this).addClass("active");
});
CSS
.active{
background-color:green !important;
}
JSFiddle

Hide a div that is currently opened and show the div thats clicked,and vice versa

I basically want to create a product listing page using jquery, just like this page: https://losangeles.sharegrid.com/browse/
Here is my code:
$(function(){
$('.link').click(function(){
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('#'+id).show();
});
});
.container {
width: 100%;
height: auto;
}
.eighty-percent {
width: 80%;
margin: 0 auto;
}
.categories {
width: 20%;
float: left;
ul {
li {
ul {
display: none;
}
}
}
}
.products-list {
width: 80%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="eighty-percent">
<div class="categories left">
<ul>
<li>
<a href="#" class="link" id="main-category" rel="main1">
main-category-one
</a>
<ul>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list" id="main-sub1">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub2">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub3">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub4">
<h1>sub category one</h1>
</div>
</div>
</div>
</div>
Now the problem I am having is as you can see, I cannot make the div that is currently opened make hidden when I click on the other sub category links. I hope my snippet will make clear what I am trying to achieve

All changes and details are commented within the source.
FIDDLE
SNIPPET
$(function() {
$('.link').click(function(event) {
/*
Added to prevent <a>nchor links
from jumping. Note the `event`
parameter above as well.
*/
event.preventDefault();
$(this).next('ul').toggle();
var id = $(this).attr("rel");
/*
Added a class (i.e. `sub`), to
each #main-sub* so all of them will
be targeted to hide by the .hide()
method.
*/
$('.sub').hide();
$('#' + id).show();
});
});
.container {
width: 100%;
height: auto;
}
/*
Added to prevent the right
column from wrapping under
the left column.
*/
.subList {
height: 100vw;
display: none;
}
.categories {
width: 50%;
float: left;
}
.products-list {
width: 50%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!--Removed .eighty-percent because it
hindered layout in demo only,
adding it or removing it shouln't
affect functionality in your production version.-->
<div class="categories left">
<ul>
<li>
main-category-one
<!--Added a class (i.e. subList)
in order to style it easier,
see CSS for why styling was needed -->
<ul class="subList">
<!--Changed each <a>nchor id as a
unique one. You should never have more
than one of the same id on a page.-->
<li>sub-cat-one
</li>
<li>sub-cat-two
</li>
<li>sub-cat-three
</li>
<li>sub-cat-four
</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list sub" id="main-sub1">
<h2>sub category one</h2>
</div>
<div class="products-list sub" id="main-sub2">
<h2>sub category two</h2>
</div>
<div class="products-list sub" id="main-sub3">
<h2>sub category three</h2>
</div>
<div class="products-list sub" id="main-sub4">
<h2>sub category four</h2>
</div>
</div>
</div>

As far as I understood, you want to hide the main div when another was clicked.
This would achieve it:
$(function() {
$('.link').click(function() {
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('div[id^="main"]').hide(); // added line
$('#' + id).show();
});
});