Creating a sidebar with javascript and jquery that cycles divs simultaneously - javascript

first of all, I'm new to programming and english is my second lanuage so be a little bit more tolerant! Now, I'm trying to create a side bar with html/javascript/jquery with not much success..
the examples are pretty self explanatory.
This is what I've come up with;
html code;
<div id="sidebar">
<ul id="side-rcnt-thumb-post-list">
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
</ul>
</div>
my basic javascript+jquery code;
var divs = $('div[id^="content-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
[This is an example of how it works now;][1]
[1]: https://jsfiddle.net/9020cew0/
And how it SHOULD work;
It should simultaneously AND separately cycle the li's, for example
second 1; it shows "include title 1" 6 times
second 2; it shows "include title 2" 6 times etc... you get the point!
Every time I try something...it just gets messy, I'm confused... thanks in advance..


So I've removed the transitions from this version, simply to remove factors of complication. I'm not messing with a counter, it isn't absolutely necessary. If any div has more elements than another, it will not break -- each LI is treated separately. It's available as a fiddle, or see below:
var divs = $('div[id^="content-"]').hide();
cycle();
function cycle() {
$("li").children(":visible").hide().next().show();
if ($("li").children(":visible").length == 0) {
$("li").children(":first-child").show();
}
setTimeout(cycle, 500);
}
#sidebar{
width: 250px;
margin-left:50%;
}
/*
Style Sidebar Recent Blog Posts with 75x75px Thumbnails
*/
ul#side-rcnt-thumb-post-list {
list-style: none;
margin: 0;
padding: 0;
}
#side-rcnt-thumb-post-list li {
margin-top: 15px;
overflow: hidden;
border-top: 1px solid #CCC;
padding-top: 15px;
position: relative;
min-height: 76px;
}
.srtpl-l {
float: left;
margin-right: 15px;
}
.srtpl-a {
display: block;
outline: 0!important;
font-weight: 400;
}
#side-rcnt-thumb-post-list img {
max-width: 100%;
width: auto\9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
.srtpl-r {
margin-left: 90px;
}
.srtpl-n {
display: block;
color: #343534;
line-height: 1.2;
font-weight: 600;
font-size: 13px;
outline: 0!important;
text-decoration: none;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<div id="sidebar">
<ul id="side-rcnt-thumb-post-list">
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-11">include title 1</div>
<div id="content-22">include title 2</div>
<div id="content-33">include title 3</div>
<div id="content-44">include title 4</div>
<div id="content-55">include title 5</div>
<div id="content-66">include title 6</div>
<div id="content-77">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
<li>
<div id="content-1">include title 1</div>
<div id="content-2">include title 2</div>
<div id="content-3">include title 3</div>
<div id="content-4">include title 4</div>
<div id="content-5">include title 5</div>
<div id="content-6">include title 6</div>
<div id="content-7">include title 7</div>
</li>
</ul>
</div>

Related

How to target a part of CSS class name?

Example 1 works:
HTML:
<div class="items">
<div class="item">item 1</div>
<div class="prefix-item-suffix">item 2</div>
<div class="item">item 3</div>
</div>
CSS:
div[class^="prefix"][class$="suffix"] {
color: red;
}
Example 2 doesn't:
HTML:
<div class="items">
<div class="item">item 1</div>
<div class="multiple prefix-item-suffix classes">item 2</div>
<div class="item">item 3</div>
</div>
CSS:
div[class^="prefix"][class$="suffix"] {
color: red;
}
Example 2 has multiple classes so CSS approach stops working. In real time project the multiple classes will be random except the one targeted in between them, the value between prefix-the_dynamic_value-suffix will also be random, how to target that with other classes inside same element? Because example 1 approach doesn't work.

Try [class*=…]
div[class*="prefix-"][class*="-suffix"] {
color: red;
}
<div class="items">
<div class="item">item 1</div>
<div class="multiple prefix-item-suffix classes">item 2</div>
<div class="item">item 3</div>
</div>

You could do this with js by checking if some class on the element starts with prefix and ends with suffix. If the check returns true then you run your code.
document.querySelectorAll('.items > div').forEach(el => {
const check = [...el.classList].some(cls => {
return cls.startsWith('prefix') && cls.endsWith('suffix')
})
if (check) {
el.style.color = 'red'
}
})
<div class="items">
<div class="item">item 1</div>
<div class="multiple prefix-item-suffix classes">item 2</div>
<div class="item prefix-item-suffix-not-this">item 3</div>
</div>

open and close menus

I have 4 menus and with this piece of code, i can show menus and hide them with specific btns .my question is how can i when i open a menu and i don't close it and then I open another one close previous menus? i tried to store the open menu in a variable and check it when i open another one but it didn't work.
<body>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container"> ‌
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
</div>
</body>
const btns = document.querySelectorAll(".btn");
btns.forEach(btn => {
const menu = btn.parentElement;
const items = menu.querySelector(".items");
const itemsContainer = items.querySelector(".items-container");
const itemsContainerHeight = itemsContainer.getBoundingClientRect().height;
let previousActivebtn = "";
btn.addEventListener("click", (e) => {
// change btn text
if (e.currentTarget.innerHTML == "open") {
e.currentTarget.innerHTML = "close";
} else {
e.currentTarget.innerHTML = "open";
}
//show and hid the menus
if (!items.classList.contains("item-active")) {
items.classList.add("item-active");
items.style.height = itemsContainerHeight + 32 + "px";
} else {
items.classList.remove("item-active");
items.removeAttribute("style");
}
});
});

You overcomplicate it. You could create a CSS rule which would ensure that .items is hidden, unless .menu is opened:
.menu .items:not(.open) {
display: none
}
And you could create a function like this:
function open(item) {
if (!item.classList.contains("open")) {
//Hide whatever was opened
for (let it of document.querySelectorAll(.menu .items.open)) {
it.classList.remove("open")
}
item.classList.add("open");
} else {
item.classList.remove("open");
}
}
Just pass to this function the item having the class of items.

Make content scroll behind sticky header

I have a scroll area in which there are different headings which I want to be sticky, have a look at this fiddle.
.item{
height: 60px;
width: 100%;
background-color:red;
margin:3px 0;
}
.heading{
position:sticky;
top:0;
height:40px;
}
<div style="overflow-y:auto;height:300px;">
<h3 class="heading">Heading 1</h3>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<h3 class="heading">Heading 2</h3>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<h3 class="heading">Heading 3</h3>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<h3 class="heading">Heading 4</h3>
<div class="item">Item 19</div>
<div class="item">Item 11</div>
<div class="item">Item 12</div>
</div>
As you can see every item is visible behind the headings. As in the fiddle, in my real application these heading elements are also transparent. So I need a way to make the items overflow right under each heading.

Place background:inherit to heading and every wrapping element up to the element which has the image as backgrund. Plunkr Credits

jQuery alternative to nth-child selector that supports classes

I have a structure like this:
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
...
</div>
I need to select only nth .item div class child of a .parent div (counter resets for every parent node).
For example I want to select every third "div.item" element so I'm expecting to affect elements with content "Item 3", "Item 6", "Another item 3".
Rules:
Desired classes are always applied to a "div" element (maybe not important).
Parents have always "parent" class and are also always "div" elements.
Amongst divs there can be other divs (or any other type of element) with random class name (or without) and these must not interfere with the nth counter.
Elements also can be nested so every item class element can in addition contain another parent class element and that again another item class elements.
Unfortunatelly CSS selector:
div.parent div.item:nth-child(3n)
with nth-child() is not working properly. Although the effects are applied only to elements with given class, the counting itself is not correct because it counts also elements without given class.
As I doubt that there will be pure CSS solution and also because I'm in fact using this as a jQuery selector, I would like some simple jQuery alternative. Thank you guys for any help you can give me.

You can filter the items based on the index they have in the parent, in relation to other items with the same class
$('.item').filter(function(_,item) {
return ($(item).siblings('.item').addBack().index(item)+1) % 3 === 0;
}).css('color','red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
...
</div>

If you want nth element of some jQuery collection you need to use the .eq() selector on that collection. As in...
var allItems = $('.parent').find('.item');
for (i = 1; i <= allItems.length/3; i++) {
allItems.eq((i*3)-1).css({'border':'1px solid red'})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
...
</div>
The above will keep your count throughout the collection (irrespective of parents). If you want each parent dealt with separately, use an .each() on $('.parent')s. As in...
$('.parent').each( function(){
var theseItems = $(this).find('.item');
for (i = 1; i <= theseItems.length/3; i++) {
theseItems.eq((i*3)-1).css({border:'1px solid red'})
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
...
</div>

As I doubt that there will be pure CSS solution
For a pure css solution you can utilize General siblings combinator selector ~.
The elements represented by the two sequences share the same parent in
the document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.
Use two selectors. At first selector, match required element. At second selector match elements following first selector, set default value for properties set at first matched element or use unset.
/* match third `div.item` */
.parent div.item ~ div.item ~ div.item {
color: sienna;
font-size: 2em;
}
/* match fourth through last `div.item` */
.parent div.item ~ div.item ~ div.item ~ div.item {
color: unset;
font-size: unset;
}
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
<div class="item">Another item 4</div>
<div class="item">Another item 5</div>
...
</div>
I need to select only nth .item div class child of a .parent div
(counter resets for every parent node).
For example I want to select every third "div.item" element so I'm
expecting to affect elements with content "Item 3", "Item 6",
"Another item 3".
Did not initially notice that requirement was to select every third element.
You can still utilize css General sibling combinator selector with .querySelector(), which returns a single element, within a javascript function to return expected result.
The function currently accepts a parent element as selector string or DOM element, descendant element selector, number referencing the distance between selections of descendant selector, a callback to call for each matched element, returns matched elements within an array.
for loop within for..of loop iterates a maximum of childSelector.length / nth times. A selector string is constructed using the nth number parameter within the for loop; .querySelector() returns the single element, then increments the nth parameter which creates selector matching nth element from previous matched element for next iteration; eliminating the necessity for for loop to iterate all childSelector.length elements of parentSelector to match the required selectors.
const gen = function* (arg) {
yield* arg[Symbol.iterator] ? arg : [arg]
};
window.onload = function() {
// `parentSelector`: `".parent"`, `document.querySelector(".parent")`,
// `document.querySelectorAll(".parent"),
// `document.getElementsByClassName(".parent")`
// `childSelector`: `".item"`; `nth`: `3`; `callback`: function
function nthElement(parentSelector, childSelector, nth, callback) {
let [nthparents, selector, n, items] = [
typeof parentSelector === "string"
? document.querySelectorAll(parentSelector)
: [...gen(parentSelector)]
, childSelector
, nth
, []
];
for (let nthp of nthparents) {
for (let i = n; i <= nthp.querySelectorAll(selector).length; i += n) {
let item = nthp.querySelector(Array(i).fill(selector).join("~"));
items.push(item);
callback.call(item, i, item, nthp)
}
};
return items
}
// select every `nth` third `.item` element
// that is a child of `.parent` element
let items = nthElement(document.querySelectorAll(".parent"), ".item", 3
, function (i, nth, nthParent) {
console.log(i, nth, nthParent);
this.style.color = "sienna";
this.style.fontSize = "2em";
});
console.log(items);
}
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
<div class="randomclass">...</div>
<div class="randomclass">...</div>
<div class="randomclass">...</div>
<div class="item">Item 8</div>
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
<div class="anotherclass">...</div>
<div class="item">Another item 4</div>
<div class="item">Another item 5</div>
...
<div class="anotherclass">...</div>
<div class="anotherclass">...</div>
<div class="anotherclass">...</div>
<div class="item">Another item 6</div>
</div>
Using jQuery
$(function() {
function nthElement(childSelector, nth, callback) {
let [nthparents, selector, n, items] = [
Array.from(this)
, childSelector
, nth
, []
];
for (let nthp of nthparents) {
for (let i = n; i <= nthp.querySelectorAll(selector).length; i += n) {
let item = nthp.querySelector(Array(i).fill(selector).join("~"));
items.push(item);
callback.call(item, i, item, nthp)
}
};
return jQuery(items)
}
// set `nthElement` as a jQuery method
$.fn.extend({nthElement: nthElement});
// select every third `.item` element that is a child of `.parent` element
var items = $(".parent").nthElement(".item", 3, function(i, nth, nthParent) {
console.log(i, nth, nthParent);
$(this).css({color: "sienna",fontSize: "2em"});
});
console.log(items);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="parent">
<div class="randomclass">...</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="randomclassdifferentname">...</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
...
<div class="randomclass">...</div>
<div class="randomclass">...</div>
<div class="randomclass">...</div>
<div class="item">Item 8</div>
</div>
<div class="parent">
<div class="anotherclass">...</div>
<div class="item">Another item 1</div>
<div class="item">Another item 2</div>
<div>...</div>
<div class="item">Another item 3</div>
<div class="anotherclass">...</div>
<div class="item">Another item 4</div>
<div class="item">Another item 5</div>
...
<div class="anotherclass">...</div>
<div class="anotherclass">...</div>
<div class="anotherclass">...</div>
<div class="item">Another item 6</div>
</div>

nth-child selector is not class sensitive. It selects element by name not by class. See jquery nth-child
The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.
Though eq(n) is class sensitive but it not supports equation as parameter.
So I think there's no direct way to use css only to implement it.
Try it also with some js codes.

This isn't possible with pure CSS selectors. However, this is something achievable if you have the flexibility to use a unique tag name instead of div.item. Here is something you could do, if you could change the div.item elements to a p tag.
.parent p:nth-of-type(3n) {
color: red;
}
.parent {
padding: 10px;
border: 1px solid black;
}
.item {
border: 1px dotted black;
}
<div class="parent">
<div class="randomclass">Random</div>
<p class="item">Item 1</p>
<p class="item">Item 2</p>
<p class="item">Item 3</p>
<div class="randomclassdifferentname">Random different Name</div>
<p class="item">Item 4</p>
<p class="item">Item 5</p>
<p class="item">Item 6</p>
<p class="item">Item 7</p>
</div>
<div class="parent">
<div class="anotherclass">Another Random</div>
<p class="item">Another item 1</p>
<p class="item">Another item 2</p>
<div>Random Text</div>
<p class="item">Another item 3</p>
</div>

Creating a layout using bootstrap grid with polygonal shape

I am trying to create a layout using bootstrap grid in polygonal shape but somehow the layout height is not matching, I tried to match height using JS but cant get it, may be if somebody have idea of doing it in other way, please help!
Here is the example how I am trying to achieve, please note that every column would have hover effect as well and in the same shape as its showing by default:
Here is JSfiddle demo
CSS
<style>
.main-wrapper{float:left; width:100%; background:#cccccc;}
.col-md-3{border: 1px solid black;}
.overflowH{overflow: hidden;}
</style>
HTML
<div class="container-fluid">
<div class="row fullH overflowH">
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
<div class="col-md-3">Text Here</div>
</div>
</div>
</div>
jQuery
//Resize div height to viewport size
function setHeight() {
windowHeight = $(window).innerHeight();
$('.fullH').css('height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
//Rotated box
$('.col-md-3').height( Math.round( $('.col-md-3').width() ) * Math.tan(0.523599) );
$('.col-md-3').css('transform', 'skewY(-30deg)');

As mentioned above by #Brett Gregson rotating row instead of column should be good idea, check the code below, I have created custom col instead of bootstrap so you just need to write media query for that to make it work in responsive.
Here is the code:
CSS
.col-md-25{border: 1px solid black; width:20%; float:left;}
HTML
<div class="container-fluid">
<div class="row" style="margin-top:-465px;">
<div class="col-md-25"></div>
<div class="col-md-25"></div>
<div class="col-md-25"></div>
<div class="col-md-25"></div>
<div class="col-md-25"></div>
</div>
<div class="row">
<div class="col-md-25">Text Here 1</div>
<div class="col-md-25">Text Here 2</div>
<div class="col-md-25">Text Here 3</div>
<div class="col-md-25">Text Here 4</div>
<div class="col-md-25">Text Here 5</div>
</div>
<div class="row">
<div class="col-md-25">Text Here 1</div>
<div class="col-md-25">Text Here 2</div>
<div class="col-md-25">Text Here 3</div>
<div class="col-md-25">Text Here 4</div>
<div class="col-md-25">Text Here 5</div>
</div>
<div class="row">
<div class="col-md-25">Text Here 1</div>
<div class="col-md-25">Text Here 2</div>
<div class="col-md-25">Text Here 3</div>
<div class="col-md-25">Text Here 4</div>
<div class="col-md-25">Text Here 5</div>
</div>
</div>
jQuery
$('.col-md-25').height( Math.round( $('.col-md-25').width() ) * Math.tan(0.523599) );
$('.row').css('transform', 'skewY(-25deg)');

Categories

Resources