Develop Reference

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;
}

Hiding /Showing Div

I want the (".aboutPage") to show and hide when (".about") is clicked. On start the div is showing. How do I incorporate the hide() with this as it is not hidden once the page loads. Please help. I am aware that the div has not been sized or anything, I'll do that after I get all three working.
.aboutPage {
height: 50px;
width: 50px;
background-color: red;
}
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>

You have to use toggle method in order to display or hide the matched elements.
Also, you need to bind a click event handler to .about element.
To hide div when page loads: $('.aboutPage').hide();
or using css:
.aboutPage{
display:none;
}
$('.aboutPage').hide();
$('.about').click(function(){
$('.aboutPage').toggle();
});
.aboutPage{
height: 50px;
width: 50px;
background-color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>
</body>

You can use jQuery to toggle a class that hides the element.
$('.about').on('click',function() {
$('.aboutPage').toggleClass('hide');
})
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>
And here's how you would do it in vanilla JS
document.getElementsByClassName('about')[0].addEventListener('click',function() {
document.getElementsByClassName('aboutPage')[0].classList.toggle('hide');
})
.hide {
display: none;
}
<div class="container">
<h1 class="title">Name Goes Here</h1>
<br>
<div class="menu">
<h1 class="about">About Me</h1>
<h1 class="projects">Projects</h1>
<h1>Contact Me</h1>
</div>
<div class="aboutPage"> Here it Is</div>
</div>

You certainly "can" use JQuery to do this, but it is not necessary.
See comments inline for explanation (Note: I've changed the last 3 h1 elements to p elements just so they will fit into the code snippet window here.):
// Get references to DOM objects needed to work the problem:
var a = document.querySelector(".about");
var ap = document.querySelector(".aboutPage");
// Add a "click" event handler to the .about element
a.addEventListener("click", function(){
// If .aboutPage is hidden, show it - otherwise hide it.
// Do this by adding or removing the .hide class.
if(ap.classList.contains("hide")){
ap.classList.remove("hide");
} else {
ap.classList.add("hide");
}
});
.aboutPage{
height: 50px;
width: 50px;
background-color: red;
}
.hide { display:none; }
<div class="container">
<h1 class="title">Name Goes Here</h1>
<div class="menu">
<p class="about">About Me</p>
<p class="projects">Projects</p>
<p>Contact Me</p>
</div>
<div class="aboutPage hide"> Here it Is</div>
</div>

Making a horizontal list using ng-repeat? Not sure what I'm missing here

Pretty simple question, but I've been staring at this code for way too long that I've become code blind and can't see what I'm doing wrong here.
I'm simply trying to make a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here is the HTML for it:
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form name="socreForm">
<div ng-hide="hasScreenshot === true"></div>
<h3>Screenshots</h3>
<ul class = "imgList">
<li ng-repeat="item in screenshots">
<div style="text-align: center;">User: {{item.user}}</div>
<img class="thumbnail" ng-src = "{{item.imageURL}}">
</li>
</ul>
<h3>Outcome</h3>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'1'">
<label>Win</label>
</div>
<div>
<input type="radio" ng-model="formData.outcome" name="outcome" ng-value="'2'">
<label>Lose</label>
</div>
</form>
</div>
</div>
</div>
And here is the CSS I'm trying to use:
.imgList {
li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
}
.thumbnail {
width: 40%
}
I've been fiddling with this for a while now and I simply cannot make it appear horizontally. This is what it looks like when it renders:
What silly CSS thing am I missing? Thank you in advance for any help!

Replace <div style="text-align: center;">User: {{item.user}}</div> with <span style="text-align: center;">User: {{item.user}}</span>
or add CSS rule like:
.imgList div {
display: inline; //or inline-block
}
Divs are display: block by default (user agent stylesheet)

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();
});
});

How to hide/ show navbar when user clicks on the bar icon?

How do I hide my navbar when the user clicks on the "bar-icon"?
I want to create a navbar which begins hidden and when the user clicks on the bar icon, the navbar displays
. Can you do that with JavaScript? Or do you need jQuery for that?
HTML
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Heading 1</h1>
</div>
</div>
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<header class="header">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</header>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>
</div>
I'm just trying to figure out how I can hide the navbar, so no fancy-looking 3D effects when it displays is needed, (for now at least).
If I haven't provided enough information, please tell me so that I can provide the right amount of information needed to solve this.

Here is how to control that with a simple show and hide with basic javascript:
function openMenu(e){
document.getElementById('menu').style.display = 'block';
}
function closeMenu(e){
document.getElementById('menu').style.display = 'none';
}
https://jsfiddle.net/7xo87kz6/

You may use jQuery for this purpose.
Make sure to include jQuery in your project.
Jquery Part
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bar").click(function(){
$(".bannerContainer").toggle();
});
});
</script>
HTML Part
nav {
height: 60px;
width: 100%;
background-color: #ccc;
}
<div class="banner">
<div id = "bar">
<i class="fa fa-bars"></i>
<nav class="nav">
</nav>
</div>
</div>
<div class="bannerContainer">
<h1>Display like that above!</h1>
</div>