Develop Reference

HTML Select item show div and post problem

I am confused. I want two products to be selected. These products will be open by clicking the button. The selection will be made on the screen that opens. And the selected product will replace the button clicked.
I can show the products by clicking the button. I even got the result I wanted as text with jquery. But I used <select> <option> for this. There will be no drop-down list and only one will be selected. The selected image will replace the clicked area. I couldn't :(
$(document).ready(function() {
$(".showbutton, .showbutton img").click(function(event) {
var buttonName = $(this).closest('div').attr('id');
var buttonNo = buttonName.slice(4);
var boxName = "#box" + buttonNo;
$(boxName).fadeIn(300);
});
$(".closebtn").click(function() {
$(".box").fadeOut(200);
});
$(".box").click(function() {
$(".box").fadeOut(200);
});
$(".innerbox").click(function() {
event.preventDefault();
event.stopPropagation();
});
});
div.showbutton {}
div.showbutton:hover {}
.box {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.innerbox {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#box1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#box2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.closebutton {
width: 20%;
float: right;
cursor: pointer;
}
.closebtn {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="showbutton" id="link1">
click for first items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
<div class="showbutton" id="link1">
click for second items
</div>
<div id="box1" class="box">
<div class="innerbox">
<div class="closebutton">
<div class="closebtn">X</div>
</div>
- item1.png - item2.png - item3.png
</div>
</div>
JSFIDDLE example of my codes: https://jsfiddle.net/j5fqhat6/

You can add data attribute to your kutu div this will help us to identify from where click event has been occurred .So, whenever your gosterButonu is been clicked you can use this data-id to add selected images text to your gosterButonu div.
Demo Code :
$(document).ready(function() {
$(".gosterButonu, .gosterButonu img").click(function(event) {
var butonAdi = $(this).attr('id');
console.log(butonAdi)
//if on click of button you want to remove active class
// $("div[data-id="+butonAdi+"]").find("li").removeClass("active")
$("div[data-id=" + butonAdi + "]").fadeIn(300);
});
$(".kapatButonu").click(function() {
var data_id = $(this).closest(".kutu").data("id");
$("#" + data_id).text($(this).closest(".icKutu").find("li.active").text())
$(".kutu").fadeOut(200);
});
$(".kutu").click(function() {
$(".kutu").fadeOut(200);
});
$(".icKutu").click(function() {
event.preventDefault();
event.stopPropagation();
});
//on click of li
$(".images li").click(function() {
//remove active class from other lis
$(this).closest(".images").find("li").not(this).removeClass("active")
//add active class to li which is clicked
$(this).addClass("active");
})
});
div.gosterButonu {}
div.gosterButonu:hover {}
.kutu {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.icKutu {
overflow: scroll;
width: 80%;
height: 80%;
margin: 5% auto;
background-color: white;
border: 3px solid gray;
padding: 10px;
box-shadow: -10px -10px 25px #ccc;
}
#kutu1 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
#kutu2 {
position: fixed;
display: none;
width: 400px;
height: 400px;
top: 0;
left: 0;
}
.kapatButonuCerceve {
width: 20%;
float: right;
cursor: pointer;
}
.kapatButonu {
text-align: right;
font-size: 20px;
font-weight: bold;
}
.clear {
clear: both;
}
ul li {
list-style-type: none
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="builder" action="" method="POST">
<div class="gosterButonu" id="link1">
clickfor first items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu1" data-id="link1" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<!--added ul li-->
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>
<div class="gosterButonu" id="link2">
click for second items
</div>
<!--added data-id which matched with the div above-->
<div id="kutu2" data-id="link2" class="kutu">
<div class="icKutu">
<div class="kapatButonuCerceve">
<div class="kapatButonu">X</div>
</div>
<div class="clear"></div>
<ul class="images">
<li>- item1.png</li>
<li> - item2.png </li>
<li>- item3.png</li>
</ul>
</div>
</div>

View the top part of the text when applying css: "overflow: hidden;"

I'm trying to create a timepicker, with the following elements:
Up buttons for the hour and time;
Two displays for next time, one for the next hour and the other for next minutes;
Two displays for current time, one for the current hour and the other for current minutes;
Two displays for the previous time, one for the previous hour and one for the previous minutes;
Down buttons for the hour and time.
I'm trying to create the idea of ​​movement when you press any of the buttons.
This is the visual aspect I've achieved so far:
What I could not do:
To present the upper part of the numbers, on the previous time displays.
What am I doing wrong, and how can I fix it, using javascript, css, jquery and html?
To create the visual look of my timepicker, I used the following code:
$(document).ready(function() {
$("#th31").html("01");
$("#tm31").html("01");
$("#th3").html("00");
$("#tm3").html("00");
$("#th32").html("23");
$("#tm32").html("59");
} );
.modal-pop-up-time{
background-color: WhiteSmoke ;
cursor:pointer;
display:block;
width: 200px;
height: 150px;
position: absolute;
left: 52%;
z-index:10001;
}
.flex-container{
position: relative;
/* Other styling stuff */
width: 50px;
height: 25px;
background-color: #3498db;
}
.flex-container1{
position: relative;
display: inline-block;
/* Other styling stuff */
width: 50px;
height: 10px;
background-color: red;
}
.spinner {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.spinner-input-wrapper {
display: flex;
}
.spinner-input {
margin: 0 3px;
}
.inner-element{
position: absolute;
left: 50%;
top: 50%;
width: 80%;
height: 100%;
transform: translate(-50%,-50%);
/* or 3d alternative if you will add animations (smoother transitions) */
transform: translate3d(-50%,-50%,0);
}
.triangle-up,
.triangle-down {
width: 0;
height: 0;
border: 4px solid transparent;
}
.triangle-up {
border-bottom-width: 8px;
border-bottom-color: #555;
}
.triangle-down {
border-top-width: 8px;
border-top-color: #555;
}
.div-overflow-hide{
overflow: hidden;
}
.input-line-height{
line-height: 10% !important;
}
.input-text-center{
text-align: center !important;
}
.input-background-color{
background-color: DeepSkyBlue ;
}
.input-background-color-white{
background-color: white ;
}
.input-text-color{
color: White;
}
.div-center-element{
margin:auto;
}
.div-ml-40{
margin-left: 40% !important;
}
.div-mlr-5{
margin-right: 5% !important;
margin-left: 5% !important;
}
.div-ml-10{
margin-left: 10% !important;
}
.div-ml-5{
margin-left: 20% !important;
}
.div-tiangles-background-color{
background-color: yellow;
}
<link href="lib/noty.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div tabindex="-1" class = "modal-pop-up-time" id = "popupreg">
<div class="spinner-input-wrapper div-ml-10">
<div class="spinner div-mt-5">
<label class="div-ml-5">HH</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up4"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th31" ></div>
</div>
<div class= "flex-container " tabindex="2" >
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "th3" ></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down4"></div>
</div>
</div>
<div class= "spinner div-mt-5">
<label class="div-mlr-5" >:</label>
</div>
<div class="spinner divmarginhor div-mt-5" >
<label class="div-ml-5" >MM</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up5"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "tm31" ></div>
</div>
<div class= "flex-container" tabindex="2">
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "tm3" ></div>
</div >
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height input-background-color-white inner-element div-overflow-hide" id = "tm32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down5"></div>
</div>
</div>
</div>
</div>

You can achieve what you want using some absolute positioning and line-height:
.timebox {
display: inline-block;
line-height: 2em;
height: 4em; /* only wants to be double the line-height */
overflow: hidden;
position: relative;
width: 2em; /* can be what you want */
}
.inner {
height: 6em; /* timebox line-height multiplied by 3 (number of numbers */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.number {
width: 2em;
text-align: center;
}
<div class="timebox">
<div class="inner">
<div class="number">
1
</div>
<div class="number">
2
</div>
<div class="number">
3
</div>
</div>
</div>
<div class="timebox">
<div class="inner">
<div class="number">
21
</div>
<div class="number">
22
</div>
<div class="number">
23
</div>
</div>
</div>

Add image below a certain class of element using css

What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example

You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}

I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>

Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>

add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>

You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>

Changing Z-Index Of Another Element On Click

in the code below I am trying to figure out how can I change "content"s z-index relatively to clicked "menu-item". I managed how to do this for menu items, but cannot find solution for the rest. In simple words I need to click #m1 and set Z-Index 10 for #c1 and so on.
HTML
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
CSS
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
JQuery
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
});
menu.click(function(){
menu.toggleClass("closed");
});
});
Working example: http://jsfiddle.net/8a3vqy5v/

No need to register multiple click events for the same element, they serve for your case same as a single binding.
You can hide and show the background content based on the menu index as follows within the click event, you can check the code snippet for full code:
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
Snippet :
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
menu.toggleClass("closed");
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
});
});
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>

You could get the index of the clicked .menu-item element and then select the corresponding .content element using the index with the .eq() method:
Updated Example
var $menu = $('.menu-item');
$menu.click(function() {
$(this).css('z-index', 11).siblings($menu).add('.content').css('z-index', '');
if (!$(this).hasClass('closed')) {
$('.content').eq($(this).index()).css('z-index', 10);
}
$menu.toggleClass("closed");
});
But since that creates a weird transition bug, you could use the code from this example instead. It essentially listens to the transitionend event.

if there is a fixed number of elements (ie: 4) you could simply throw 4 rules, one for each :
$('#m1').click(function() {
$('.content').css('z-index', '');
$('#c1').css('z-index', '11');
});
$('#m2').click(function() {
$('.content').css('z-index', '');
$('#c2').css('z-index', '11');
});
$('#m3').click(function() {
$('.content').css('z-index', '');
$('#c3').css('z-index', '11');
});
$('#m4').click(function() {
$('.content').css('z-index', '');
$('#c4').css('z-index', '11');
});
if you want a single rule that would apply to any #mx - #cx couple, you could also try to get the id of the element clicked as a string and manipulate the string in order to replace the first letter with a 'c'

Scroll div content on mouse move

I have a little trouble with scrolling the div content only on mouse move. So no scrollbars are shown etc.
So I have 17 items. Every item is square 50x50 px. Mask is 300x50. So my mask is overflow: hidden and itemsWrapper has width of all subitems. I want to make scroll items horizontally on mousemove event. Can enyone give me some advice on this?
For now I have the following code:
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<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'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>
Also the number of items can be dynamically changed so I have another trouble to make it working.

Is this almost what you intends??
Just add the following style rules:
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
Demo
$(document).ready(function() {
$('#navMask').on('mousemove', function(e) {
var leftOffset = $(this).offset().left;
$('#itemsWrapper').css('left', -e.clientX + leftOffset);
console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
});
});
#navMask {
position: relative;
overflow: hidden;
background: #ccc;
margin: 0 5px;
width: 300px;
height: 50px;
}
#tabWrapper {
position: absolute;
margin-left: 0;
}
.tab {
width: 50px;
height: 50px;
float: left;
background: beige;
}
.tab:hover {
background: #e4e4a1;
}
#itemsWrapper {
position: absolute;
}
.item {
width: 100px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='navMask'>
<div id='itemsWrapper'>
<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'>8</div>
<div class='item'>9</div>
<div class='item'>10</div>
<div class='item'>11</div>
<div class='item'>12</div>
<div class='item'>13</div>
<div class='item'>14</div>
<div class='item'>15</div>
<div class='item'>16</div>
<div class='item'>17</div>
</div>
</div>