Develop Reference

HTML - Sticky position partially working for table

I want to build a first column sticky with css position:sticky and left:0.
While I have a header and a table, with overflow-x: scroll set.
However, when I start to scroll to right, the first column for the table body is partially working and starting to move once it passed the width of its parent. For the table header it doesn't have such problem.
Please may I have your to provide some insights here
Here is my codepen for reference. Thanks a lot!!
https://codepen.io/jackforfun/pen/yLPwYoz

Add to your .row-container the two css properties below:
display: flex;
flex-wrap: wrap;
.cell {
padding: 25px;
flex: 0 0 100px;
border: 1px solid grey;
}
.cell-1 {
padding: 25px;
flex: 0 0 100px;
border: 1px solid grey;
background-color: red;
position: sticky;
left: 0;
}
.header {
display: flex;
background-color: orange;
width: 500px;
overflow-x: scroll;
}
.row-container {
display: flex;
flex-wrap: wrap;
width: 500px;
overflow-x: scroll;
}
.row {
display: flex;
background-color: green;
}
<div>
<div class="header">
<div class="cell-1">First</div>
<div class="cell">Header</div>
<div class="cell">Header</div>
<div class="cell">Header</div>
<div class="cell">Header</div>
<div class="cell">Header</div>
<div class="cell">Header</div>
</div>
<div class="body">
<div class="row-container">
<div class="row">
<div class="cell-1">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
</div>
<div class="row">
<div class="cell-1">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
</div>
</div>
</div>
</div>
UPDATE: 2nd Question
I cleaned up you code a little bit. You mixed inline styles with css styles. But the main solution for your second question was to assign a width for cell-1 and remove the flex 0 0 100properties for the cell-1.
.cell-1 {
border: 1px solid grey;
background-color: red;
position: sticky;
left: 0;
width:200px;
}
.cell {
padding: 25px;
height: 50px;
flex: 0 0 100px;
border: 1px solid grey;
}
.cell-1 {
border: 1px solid grey;
background-color: red;
position: sticky;
left: 0;
width:200px;
}
.row-container {
overflow-x: scroll;
flex-wrap:wrap;
display:flex;
}
.row {
display: flex;
background-color: green;
}
.grid {
width: 350px;
}
<div class="grid">
<div class="row-container">
<div class="row">
<div class="cell-1 cell" >
First Column
</div>
<div class="cell" >
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell">
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell">
Column
</div>
<div class="cell" >
Column
</div>
</div>
<div class="row">
<div class="cell cell-1">
First Column
</div>
<div class="cell">
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell" >
Column
</div>
</div>
</div>
</div>

Lowrey answer is perfectly working for above question. Thank you for that.
However, I got another similar problem when even adding the flex-wrap
cannot be resolved.
There is a table with two rows, and the first column stick to the left.
While it is scrolling horizontally, the first column was sticked initially. After a while, the first column cannot stick anymore and start to move.
The situation is a bit similar to the original question.
Thank you for advance for checking this.
.cell {
padding: 25px;
height: 50px;
flex: 0 0 100px;
border: 1px solid grey;
}
.cell-1 {
padding: 25px;
flex: 0 0 100px;
border: 1px solid grey;
background-color: red;
position: sticky;
left: 0;
}
.row-container {
overflow-x: scroll;
flex-wrap:wrap;
display:flex;
}
.row {
display: flex;
background-color: green;
}
.grid {
width: 350px;
}
<div class="grid">
<div class="row-container">
<div class="row">
<div class="cell-1" style="flex: 1 0 150px; ">
First Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
</div>
<div class="row">
<div class="cell-1" style="flex: 1 0 150px; ">
First Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
<div class="cell" style="flex: 1 0 100px; ">
Column
</div>
</div>
</div>
https://codepen.io/jackforfun/pen/abVMyMd

I am really appreciate what Lowrey help here. Thank you so much.
The provide solution for 2nd question is really helpful and able to resolve this question.
However, when I extend the width of the cells and it seems the problem happened again.
https://codepen.io/jackforfun/pen/YzEgvRj
.long-cell { flex: 0 0 300px;}
.cell {
padding: 25px;
height: 50px;
flex: 0 0 100px;
border: 1px solid grey;
}
.cell-1 {
border: 1px solid grey;
background-color: red;
position: sticky;
left: 0;
width:200px;
}
.long-cell {
flex: 0 0 300px;
}
.row-container {
overflow-x: scroll;
flex-wrap:wrap;
display:flex;
}
.row {
display: flex;
background-color: green;
}
.grid {
width: 350px;
}
<div class="grid">
<div class="row-container">
<div class="row">
<div class="cell-1 cell" >
First Column
</div>
<div class="cell" >
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell">
Column
</div>
<div class="cell long-cell" >
Column
</div>
<div class="cell">
Column
</div>
<div class="cell " >
Column
</div>
</div>
<div class="row">
<div class="cell cell-1">
First Column
</div>
<div class="cell">
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell long-cell" >
Column
</div>
<div class="cell" >
Column
</div>
<div class="cell" >
Column
</div>
</div>
</div>
</div>

JavaScript - Card Memory Game, card shuffling function

I am trying to build a memory game using javascript and I've been facing some problems. I've designed the HTML, CSS, and now I'm working on the JavaScript portion of the project. I've written a function that assigns randomly generated pictures to the cards from an array that I have storing the picture sources. The problem I am having is that, whenever I do shuffleImages() function, the pictures that appear are not always in even pairs, sometimes it's odd, which is problematic as I must have two pairs of each picture.
The question is: How do I make sure that the images I am assigning are always in even pairs, not odd?
Please note that I'm a total beginner to JavaScript, I've only written basic code for 2 weeks now.
Thanks in advance.
HTML/CSS/JavaScript portion of the code below:
var arr = ['backend.PNG', 'backend_cloud.PNG', 'html.PNG', 'css.PNG', 'js.PNG', 'jquery.PNG', 'json.PNG', 'ajax.PNG'];
var count = 0;
function shuffleImages() {
for (var i = 0; i < arr.length * 2; i++) {
var rand = Math.floor(Math.random() * arr.length);
$('#mypictures' + i).attr('src', arr[rand]);
console.log(rand);
}
console.log("DONE");
}
.box {
padding: 10px;
margin-left: 10px;
margin-bottom: 10px;
border: solid 1px #4F5B5F;
box-shadow: 1px 1px 1px #4F5B5F;
border-radius: 20px 20px 20px 20px;
text-align: center;
font-size: 100px;
background-color: #4F5B5F;
width: 150px;
height: 150px;
}
.container {
margin-left: 25%;
margin-top: 2%;
}
.main_body {
background: -webkit-linear-gradient(left, blue, white);
background: -o-linear-gradient(right, blue, white);
background: -moz-linear-gradient(right, blue, white);
background: linear-gradient(to right, #0BABE2, #0BD5E2, #0BABE2);
}
.game_title {
margin-left: 27%;
font-size: 50px;
font-family: Arial;
color: #D5EFF8;
text-shadow: 2px 2px 2px #4F5B5F;
}
.game_score {
margin-left: 3%;
font-size: 10px;
font-family: Arial;
color: #D5EFF8;
text-shadow: 2px 2px 2px #4F5B5F;
}
.score {
margin-left: 5px;
padding-left: 5px;
font-size: 15px;
color: #D5EFF8;
}
#mypictures0,
#mypictures1,
#mypictures2,
#mypictures3,
#mypictures4,
#mypictures5,
#mypictures6,
#mypictures7,
#mypictures8,
#mypictures9,
#mypictures10,
#mypictures11,
#mypictures12,
#mypictures13,
#mypictures14,
#mypictures15 {
height: 120px;
width: 120px;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<body class="main_body">
<div class="game_title"> Memory Game Project
<span class="game_score"> NUMBER OF TRIES LEFT </span>
<span class="score"> 0 </span>
</div>
<div class='container' style='display: flex'>
<div class='row'>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures0">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures1">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures2">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures3">
</div>
</div>
</div>
<div class='row'>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures4">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures5">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures6">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures7">
</div>
</div>
</div>
<div class='row'>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures8">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures9">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures10">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures11">
</div>
</div>
</div>
<div class='row'>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures12">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures13">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures14">
</div>
</div>
<div class='box' onclick="shuffleImages()">
<div class='img'><img src="" id="mypictures15">
</div>
</div>
</div>
</div>
</body>

You can first make an array that contains each image twice:
var tiles = [];
for (var i = 0; i < arr.length; i++)
tiles.push(arr[i], arr[i]);
Then shuffle that array according to How to randomize (shuffle) a JavaScript array?

Vertical scrolling but remove scrollbar

This has been asked several times across the internet; however, I can't get a solution that works for me. I need to maintain the ability to have vertical scrolling but hide the scrollbar from view at all times in the y direction.
I need my #content-main div to scroll independently from every other div. This works as is; however, I have a scrollbar I need to get rid of but I don't know how or why it is so difficult to do.
My code is set up like so:
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
</div>
</body>
And the CSS relevant for what I'm trying to do:
* {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
html, body {
margin: 10px;
padding: 0;
background: #ccc;
overflow: hidden;
}
#ipad {
padding: 0;
margin: 0;
width: 768px;
height: 1024px;
background: #fff;
overflow: hidden;
}
#content-main {
width: 600px;
height: 100%;
float: right;
overflow: auto;
}
I've seen this "solution" but it does not work for me: http://jsfiddle.net/5GCsJ/954/
And I've seen this but these did not work when applied to my #content-main div: http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
Any help would be greatly appreciated.

I have given CSS for two div separately #content-main div to scroll independently from every other div. And Should Close the DIV of #ipad div before start of #content-main div. here is the code of what you want.
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
<style>
*{margin:0;}
#ipad{
height: 300px;
width: 100%;
border: 1px solid green;
overflow: hidden;
}
#sidebar-main{
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
#content-main{
width: 100%;
height: 100px;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
html, body{
height: 99%;
border: 1px solid red;
overflow:hidden;
}
</style>

jQuery toggle expand divs inside bootstrap container wrap

Guys basically there will be a bootstrap container div, and inside there will be 4 card style divs with toggle expand/retract button. When you click on one card's button, the div will expand all the way to the container's width. Please check the image. I'm a newbie to jQuery and with the script I've, i'm not able to achieve the full width. If someone can help me out it'll be great. Here's the code below -
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() == 600 ? "200px" : "600px";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>

Is this what you're looking for?
I suggest taking a look at MDN to get deeper insights about CSS props: https://developer.mozilla.org/en-US/docs/Web/CSS/width
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() > 0 ? "0%" : "100%";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>

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