Accordion CSS Sizing Issue - javascript

I have made a dropdown menu with parent and child rows to display certain controls. I am unable to get the width of the Accordion (which is set to 100%) to actually stretch the entirety. I used the Chrome and Edge built in developer tools to inspect the HTML and find out what element has a width set which is preventing my rows from growing.
Here is what the dropdown currently looks like on my SharePoint page. I want it and its contents to stretch all the way across the page, but instead it is only stretching halfway?
Here is my JSFiddle test case: https://jsfiddle.net/tb36jsew/2/
$(document).ready(function(){
$('.retro').accordion();
});
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title {
color: black;
background-color: #eee;
cursor: pointer;
padding: 18px;
width: 200%;
height: auto;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.5s;
}
.title{
width: 200%;
height: auto;
}
.title.drop{
width: 100%;
}
.content{
width: 100%;
height: auto;
}
.ui.styled.accordion {
width: 200%;
height: auto;
}
.ui.stackable.grid.container.retro{
width: 200%;
height: auto;
}
.one.column.row{
width: 200%
height: auto;
}
.ui.styled.accordion .accordion .title, .ui.styled.accordion .title:hover {
color: #f2711c;
}
a.previous {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:link, a:visited {
color: #b3ab7d;
}
a.previous:hover {
background-color: #104723;
color: #b3ab7d;
}
.backbtn{
padding-left: 0px;
padding-top: 10px;
}
.previous {
background-color: #104723;
color: #b3ab7d;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.1/dist/semantic.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.1/dist/semantic.min.css">
<div class="ui stackable grid container retro">
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 2</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.041 Ensure that the actions of individual system users can be uniquely traced to those users so they can be held accountable for their actions.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.042 Create and retain system audit logs and records to the extent needed to enable the monitoring, analysis, investigation, and reporting of unlawful or unauthorized system activity.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.043 Provide a system capability that compares and synchronizes internal system clocks with an authoritative source to generate time stamps for audit records.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.2.044 Review audit logs.</div>
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="one column row">
<div class="column">
<div class="ui styled accordion"> <!-- Accordion parent -->
<div class="title"><i class="dropdown icon"></i>Level 3</div>
<div class="content">
<div class="ui divider"></div>
<div class="ui stackable grid container">
<div class="one column row">
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.045 Review and update logged events.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.046 Alert in the event of an audit logging process failure.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.048 Collect audit information (e.g., logs) into one or more central repositories.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.049 Protect audit information and audit logging tools from unauthorized access, modification, and deletion.</div>
<div class="content">
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.050 Limit management of audit logging functionality to a subset of privileged users.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.051 Correlate audit record review, analysis, and reporting processes for investigation and response to indications of unlawful, unauthorized, suspicious, or unusual activity.</div>
<div class="content">
</div>
</div>
</div>
<div class="column">
<div class="ui styled accordion">
<div class="title drop"><i class="dropdown icon"></i>AU.3.052 Provide audit record reduction and report generation to support on-demand analysis and reporting.</div>
<div class="content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="backbtn">
« Go Back
</div>

First of all you need to add a closing div before .backbtn in the html
</div>
<div class="backbtn">
then in css:
add width: auto; in .ui.styled.accordion .accordion .title, .ui.styled.accordion .title
remove all width: 200; height: auto
most important add following at the end of your css
.ui.styled.accordion{
width: auto !important;
}
You need it to override semantic-ui
Fiddle: https://jsfiddle.net/yvbenitah/sg06x4rc/4/

Related

Make entire div act as a link except one div which also has another link

I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.
The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.
How can i make it cover for the whole product card with one link and, only person name for the another link.
By inspecting the first and second product cards, you may execute the code and locate my current problem.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
Please check the second card which I updated
It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the name tag with an tag with another link.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #ccc;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#card-2 {
cursor: pointer;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group"></div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
alt=""
/>
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<div
id="card-2"
class="item col-xs-4 col-md-3"
onclick="window.location='https://www.youtube.com'"
>
<div class="thumbnail">
<img
class="img-id"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
alt=""
/>
<div class="person">
<a href="https://www.linkedin.com/">
<p class="person-name">Person Name</p>
</a>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</div>
</div>
</div>

why my owl carousel items are sorted vertical not horizontal?

i want to ask, i have a problem in my owl carousel.
I want to make a center drag slider with the owl carousel, when I've made the code, the items are vertical not horizontal. what's wrong? I've also included a
Codepen
Is the owl carousel not automatic like the slick carousel? If you know, please help me. I need your help, because this is my first time using the owl carousel
HTML
<div class="slider-news">
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
</div>
SCSS
.card{
border: none;
border-radius: 20px;
&.secondary-card{
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 13px 26px rgba(0,0,0,0.07);
.card-img-top{
height: 250px;
position: relative;
background-color:#c1c1c1;
#tags{
position: absolute;
top: 20px;
left: 20px;
.tags{
&:nth-child(1){
margin-right: 10px;
}
}
}
}
.card-body{
padding: 40px 30px;
.title{
h2{
position: relative;
font-size: 20px;
line-height: 27px;
&::before{
content: '';
position: absolute;
left: 0;
bottom: -10px;
height:4px;
width:23px;
background-color: red;
}
}
}
}
}
}
.tags{
display: flex;
justify-content: center;
align-items: center;
padding: 5px 8px;
color: #fff;
font-size: 13px;
&.yellow{
background-color: yellow;
}
}
JS
$(document).ready(function() {
$('.slider-news').owlCarousel({
center: true,
items: 4,
loop: false,
margin: 10,
nav:false,
dots:false,
// responsive: {
// 600: {
// items: 4
// }
// }
});
});
Hello instead of using the class .slider-news try using the owl-carousel on your mark up and javascript. I think it has some default styling on the libary. I worked on this library before and I used owl carousel. If you want custom style you can use a secondary class on owl carousel.
This is the the link on the codepen I edited.

How to Make a Grid for Elements with different heights?

I'm working on a webapp and I am encountering the following problem:
I want to display a Grid of Tiles which can have a different blockHeight and Width.
For compatibility reasons I can not use CSS GRID.
I get a List of Tiles with different blockHeights and blockWidths to display in my grid. E.g. a tile with a blockHeight of 2 (like the first one in the picture above) now just has a height twice as high. This obviously wont create another Row, so there is an empty space below the two small tiles.
How can I remove the empty spaces of my grid without using CSS GRID?
Thanks in advance!
Using the following library, you can achieve this:
https://haltu.github.io/muuri/
The CSS calculations for the box sizes are proportional to the default box size; accounting for the margins.
var grid = new Muuri('.grid', {
dragEnabled: true
});
.grid {
position: relative;
background: #6EB3CA
}
.item {
display: block;
position: absolute;
width: 64px; /* Default 1 unit */
height: 64px; /* Default 1 unit */
margin: 4px; /* Margin */
z-index: 1;
background: #fff;
color: #000;
border-radius: 4px;
}
.item.muuri-item-dragging {
z-index: 3;
}
.item.muuri-item-releasing {
z-index: 2;
}
.item.muuri-item-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
text-align: center;
line-height: 64px;
}
.item-6x2 {
width: 424px; /* (64 * 6) + (4 * 10) */
height: 136px; /* (64 * 2) + (4 * 2) */;
}
.item-2x1 {
width: 136px; /* (64 * 2) + (4 * 2) */
height: 64px; /* (64 * 1) + (4 * 0) */;
}
.item-6x2 .item-content {
line-height: 136px;
}
<script src="https://unpkg.com/web-animations-js#2.3.1/web-animations.min.js"></script>
<script src="https://unpkg.com/hammerjs#2.0.8/hammer.min.js"></script>
<script src="https://unpkg.com/muuri#0.7.1/dist/muuri.min.js"></script>
<div class="grid">
<div class="item item-6x2">
<div class="item-content">
6×2
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
<div class="item item-2x1">
<div class="item-content">
2×1
</div>
</div>
</div>
i'm sorry, but can't you just use css?
.floatingItems {
float: left;
}
That way the items will alway try to align to the lefthand side.
That way you would not have to include a library.
fiddle: https://jsfiddle.net/49nq3afx/4/
user10357213,
you have two open Questions. If the answeres given were helpful, it would be nice if you accept the respective answer. Or at least reply if and why this answer does not fit you.
(can not comment jet, thats why i post another answer. sorry)

How to make code focused on adaptability and CMS?

Want to make it responsive, and the information on the elements in the first line (1-4) is required to show only under the first row, on the mobile it will be two or one element Information about the elements from the second row (5-8) under the second row In the screenshots I tried to show how I would like to see this
$(".items .item").click(function() { // Клик по айтему
$(".items .item").removeClass("active").eq($(this).index()).addClass('active');
$(".hidden-block .item-content").slideUp().eq($(this).index()).slideDown();
});
.items {
font-size: 0px;
}
.item:nth-child(2n) {
background: #e6e4e3;
}
.item {
background: #f2f1f0;
}
.items img {
filter: grayscale(80%);
transition: all 0.4s;
height: 100px;
}
.items img:hover {
filter: grayscale(0%);
}
.items .item {
padding-top: 25px;
display: inline-block;
width: 25%;
height: 150px;
box-sizing: border-box;
font-size: 24px;
text-align: center;
float: left;
cursor: pointer;
}
.item-content {
width: 70%;
margin: 0 auto;
display: block;
height: 400px;
}
.right,
.left {
width: 50%;
float: left;
padding-top: 40px;
}
.hidden-block .item-content {
display: none;
font-size: 16px;
color: #000;
}
.items .item.active {
background: #00000061;
}
.items .item.active+.hidden-block {
display: block;
}
#media screen and (max-width: 320px) {
.items .item {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
</div>
<br clear="all" />
<div class="hidden-block">
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
</div>
<br clear="all" />
<div class="items">
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
</div>
<br clear="all" />
<div class="hidden-block">
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
</div>
How must ork first row
How must work second row

Auto-scroll to a div when clicking on another div

When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example:
This is before I click on a div in the left div ("smallitems").
I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).
Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.
see jfiddle http://jsfiddle.net/h7bLK/
This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
Fiddle link
BONUS: You'll be able to link externally to the correct item.
CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.
According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col last-child">3</div>
<div class="col">4</div>
<div class="col">5 </div>
<div class="col last-child">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}
$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50.
<div class="container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});

Categories

Resources