How to simultaneously align child divs in multiple parent divs?How can I select an element with multiple classes in jQuery?How to replace innerHTML of a div using jQuery?How to prevent an undefined scrollLeft, when scrolling vertically?control child container scrollbar in parent containerJquery dialogue box horizontal scrollbar issueHow to scroll a div to left using AngularJSPrevent Divs From Scrolling Right?Parent div to scroll to child divs positionTranslateX a child div inside of a 100% width parentAnimate child inside parent
My previous employer committed a severe violation of the law and is also being sued by me. How do I explain the situation to future employers?
Strong Password Detection in Python
Is it ok for parents to kiss and romance with each other while their 2- to 8-year-old child watches?
Delete elements less than the last largest element
How do I talk to my wife about unrealistic expectations?
Can one block with a protection from color creature?
Is it okay to use open source code to do an interview task?
Matrices with shadows
What exactly is a "murder hobo"?
Computer name naming convention for security
Is homosexuality or bisexuality allowed for women?
With a data transfer of 50 GB estimated 5 hours, are USB-C claimed speeds inaccurate or to blame?
Users forgotting to regenerate PDF before sending it
Find out what encryptor name my database is using
What do you call a situation where you have choices but no good choice?
How do I separate enchants from items?
Redirecting stderr using exec
Four ships at the ocean with the same distance
Can the word "desk" be used as a verb?
Wires do not connect in Circuitikz
Would denouncing cheaters from an exam make me less likely to receive penalties?
Draw a diagram with rectangles
When do flights get cancelled due to fog?
What does the multimeter dial do internally?
How to simultaneously align child divs in multiple parent divs?
How can I select an element with multiple classes in jQuery?How to replace innerHTML of a div using jQuery?How to prevent an undefined scrollLeft, when scrolling vertically?control child container scrollbar in parent containerJquery dialogue box horizontal scrollbar issueHow to scroll a div to left using AngularJSPrevent Divs From Scrolling Right?Parent div to scroll to child divs positionTranslateX a child div inside of a 100% width parentAnimate child inside parent
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
0
Quite unsuccessfully, I am trying to align the content of multiple horizontally scrollable containers on http://paintings.directory
With no luck, I'm trying to scroll all child divs -with the same class- to the far left in their parent divs.
I have looked for a solution with no luck and therefor decided to post a question here hoping to find help.
$('#anno_1777').click(function(e)
$('section').animate(scrollLeft:$('.anno_1777').position().left, 500);
);
When I click on the (pink) 1777 button in the header I expect all child divs to "scrollLeft" within their parent divs...
jquery
asked Mar 25 at 22:33
JordyJordy
317 bronze badges
add a comment |
0
Quite unsuccessfully, I am trying to align the content of multiple horizontally scrollable containers on http://paintings.directory
With no luck, I'm trying to scroll all child divs -with the same class- to the far left in their parent divs.
I have looked for a solution with no luck and therefor decided to post a question here hoping to find help.
$('#anno_1777').click(function(e)
$('section').animate(scrollLeft:$('.anno_1777').position().left, 500);
);
When I click on the (pink) 1777 button in the header I expect all child divs to "scrollLeft" within their parent divs...
jquery
asked Mar 25 at 22:33
JordyJordy
317 bronze badges
add a comment |
0
0
0
1
Quite unsuccessfully, I am trying to align the content of multiple horizontally scrollable containers on http://paintings.directory
With no luck, I'm trying to scroll all child divs -with the same class- to the far left in their parent divs.
I have looked for a solution with no luck and therefor decided to post a question here hoping to find help.
$('#anno_1777').click(function(e)
$('section').animate(scrollLeft:$('.anno_1777').position().left, 500);
);
When I click on the (pink) 1777 button in the header I expect all child divs to "scrollLeft" within their parent divs...
jquery
asked Mar 25 at 22:33
JordyJordy
317 bronze badges
Quite unsuccessfully, I am trying to align the content of multiple horizontally scrollable containers on http://paintings.directory
With no luck, I'm trying to scroll all child divs -with the same class- to the far left in their parent divs.
I have looked for a solution with no luck and therefor decided to post a question here hoping to find help.
$('#anno_1777').click(function(e)
$('section').animate(scrollLeft:$('.anno_1777').position().left, 500);
);
When I click on the (pink) 1777 button in the header I expect all child divs to "scrollLeft" within their parent divs...
jquery
jquery
asked Mar 25 at 22:33
JordyJordy
317 bronze badges
asked Mar 25 at 22:33
JordyJordy
317 bronze badges
asked Mar 25 at 22:33
JordyJordy
317 bronze badges
asked Mar 25 at 22:33
JordyJordy
317 bronze badges
asked Mar 25 at 22:33
JordyJordy
317 bronze badges
317 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
All <section> elements get scrolled to the same position.
Note that position() returns "coordinates of the first element in the set of matched elements".
So $('.anno_1777').position() gets the position of the first .anno_1777 element in any section.
Then all sections are scrolled to that same pixel position.
I suggest using selector context to target the .anno_1777 element within each <section>:
$('.anno_1777', this)
To do so, iterate through all the sections using jQuery's each().
This also allows you to ensure the appropriate element exists in each <section> before animating it.
var $sections = $('section');
$('#anno_1777').on('click', function(e)
$sections.each(function()
let $section = $(this);
let $target = $('.anno_1777', $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);html,
body
margin: 0;
padding: 0;
/* F O N T */
@font-face
font-family: Cinetype;
src: url(/assets/fonts/GT-Cinetype-Mono.ttf);
@font-face
font-family: America;
src: url(/assets/fonts/GT-America-Mono-Regular.ttf);
/* S E L E C T*/
img
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
::selection,
::-moz-selection
background: WhiteSmoke;
/* S C R O L L B A R */
::-webkit-scrollbar
box-sizing: border-box;
width: 16px;
border: none;
::-webkit-scrollbar-track
box-sizing: border-box;
border-top: none;
border-right: 1px solid #ececec;
border-bottom: none;
border-left: 1px solid #ececec;
background: #f5f5f5;
::-webkit-scrollbar-thumb
box-sizing: border-box;
height: 100px;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
border-top: none;
border-bottom: none;
background: white;
::-webkit-scrollbar-track:horizontal
box-sizing: border-box;
border-top: 1px solid #ececec;
border-right: none;
border-bottom: 1px solid #ececec;
border-left: none;
background: #f5f5f5;
::-webkit-scrollbar-thumb:horizontal
border-left: none;
border-right: none;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
width: 100px;
::-webkit-scrollbar-thumb:window-inactive
background: white;
header
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 16px;
background: white;
z-index: 3;
height: 48px;
border-bottom: 1px solid #ececec;
color: royalblue;
text-transform: lowercase;
header span#note
position: relative;
float: right;
color: silver;
div#index_name,
div#index_year
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
z-index: 3;
color: royalblue;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
div#index_name
top: 48px;
height: 32px;
border-bottom: 1px solid #ececec;
div#index_year
top: 80px;
height: 48px;
display: flex;
/* displays flex-items (children) inline */
overflow: scroll;
overflow-y: hidden;
border-bottom: none;
div#index_name div,
div#index_year div
box-sizing: border-box;
margin: auto;
align-self: stretch;
flex-grow: 1;
text-align: center;
height: 100%;
padding: 8px 0 0 0;
vertical-align: middle;
cursor: pointer;
border-left: 1px solid #ececec;
color: Silver;
background: white;
div#index_year div
padding: 8px 16px;
display: table-row;
div#index_name div:hover
color: green;
background: #f5f5f5;
div#index_year div:hover
color: tomato;
background: #f5f5f5;
div#index_name>div:first-of-type,
div#index_year>div:first-of-type
border-left: none;
#anno_1777
color: pink !important;
div#index_artist
position: fixed;
left: 0;
margin-left: -176px;
width: 240px;
top: 128px;
bottom: 0;
box-sizing: border-box;
padding: 0;
z-index: 2;
overflow: scroll;
overflow-x: hidden;
transition: margin 200ms;
div#index_artist:hover
margin-left: 0;
div#index_artist:hover~div#container
padding-left: 240px;
div#index_artist div,
div#index_artist div.item
position: relative;
float: left;
width: 100%;
color: silver;
padding: 8px 20px 8px 16px;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
background: white;
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
cursor: default;
text-align: right;
transition: padding 200ms, color 200ms;
div#index_artist div.item
text-align: left;
cursor: pointer;
div#index_artist div.item:hover
color: green;
padding: 16px 20px 16px 16px;
div#container
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 128px 0 0 64px;
display: block;
margin: 0;
transition: padding 200ms;
div.row
position: relative;
width: 100%;
height: 316px;
box-sizing: border-box;
padding: 0;
margin: 0;
display: flex;
overflow: hidden;
section
position: absolute;
left: 224px;
right: 0px;
height: 316px;
background: white;
box-sizing: border-box;
display: flex;
overflow: scroll;
overflow-y: hidden;
padding: 0;
margin: 0;
background: #f5f5f5;
div.artist
position: relative;
height: 316px;
width: 224px;
box-sizing: border-box;
border-right: 1px solid #ececec;
border-left: none;
border-bottom: 1px solid #ececec;
padding: 16px;
margin: 0;
display: block;
background: white;
div.about
position: absolute;
box-sizing: border-box;
float: left;
padding: 6px 0 0 0;
margin: 196px 0 0 0;
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 12px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
color: Silver;
width: 100%;
height: 32px;
overflow: hidden;
p.info
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
position: absolute;
top: 48px;
border-top: 1px solid #ececec;
left: 0;
width: 224px;
height: 267px;
box-sizing: border-box;
padding: 16px 16px 0 16px;
overflow: hidden;
p.info span
margin: 0;
padding: 0 0 10px 0;
width: 100%;
display: block;
position: relative;
p.info a:link,
p.info a:visited,
p.info a:active
color: Silver;
text-decoration: none;
p.info a:hover
color: RoyalBlue;
text-decoration: none;
div.year
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0;
margin: 0;
background: white;
border-right: 1px solid #ececec;
display: table-row;
div.empty
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0 500px;
margin: 0;
background: #f5f5f5;
border-right: none;
display: table-row;
div.year>div:first-of-type
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 16px;
margin: 0;
display: table-cell;
height: 252px;
div.artwork
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 0;
margin: 0;
display: table-cell;
height: 252px;
div.artwork img
position: relative;
box-sizing: border-box;
float: left;
padding: 0;
margin: 0;
display: inline-block;
height: 196px;
div.year p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
width: 100%;
height: 49px;
padding: 16px;
text-align: left;
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
color: Tomato;
div.artist p
color: Green;
div.artist p.info
color: Silver;
text-transform: none;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
font-variant-ligatures: none;
padding: 0;
margin: 0;
/*
div#time
position: absolute;
background: blue;
padding:0;
margin:48px 0 0 0;
overflow-y: scroll;
overflow-x: hidden;
div.year
position: relative;
float: left;
background: silver;
padding:0;
margin:0;
div.artist
position: relative;
float: left;
background: green;
padding:0 16px 16px 0;
margin:0;
article
margin: 0;
padding: 0;
background-color: orange;
display: inline-block;
box-sizing: border-box;
vertical-align: bottom;
white-space:nowrap;
img
padding: 0;
margin: 0;
display: block;
height: 100px;
img:hover
z-index: 3;
height: 300px;
figure
padding: 0;
margin: 16px 0 0 16px;
display: table;
position: relative;
float: left;
figure img
padding: 0;
margin: 0;
display: block;
figcaption
display: table-caption;
caption-side: bottom;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
padding: 0;
margin: 0;
p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
margin: 0;
padding: 0 0 8px 0;
h1, h2
padding:16px 0 0 16px;
*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<p>Paintings.Directory<span id="note">about</span></p>
</header>
<div id="index_name">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="index_year">
<div>1900</div>
<div>1899</div>
<div id="anno_1777">1777</div>
<div>1897</div>
<div>1896</div>
<div>1895</div>
<div>1894</div>
<div>1893</div>
<div>1892</div>
<div>1891</div>
<div>1890</div>
<div>1889</div>
<div>1888</div>
<div>1887</div>
<div>1886</div>
<div>1885</div>
<div>1884</div>
<div>1883</div>
<div>1882</div>
<div>1881</div>
<div>1880</div>
<div>1879</div>
<div>1878</div>
<div>1877</div>
<div>1876</div>
<div>1875</div>
<div>1874</div>
<div>1873</div>
<div>1872</div>
<div>1871</div>
<div>1870</div>
<div>1869</div>
<div>1868</div>
<div>1867</div>
<div>1866</div>
<div>1865</div>
<div>1864</div>
<div>1863</div>
<div>1862</div>
<div>1861</div>
<div>1860</div>
<div>1859</div>
<div>1858</div>
<div>1857</div>
<div>1856</div>
<div>1855</div>
<div>1854</div>
<div>1853</div>
<div>1852</div>
<div>1851</div>
<div>1850</div>
<div>1849</div>
<div>1848</div>
<div>1847</div>
<div>1846</div>
<div>1845</div>
<div>1844</div>
<div>1843</div>
<div>1842</div>
<div>1841</div>
<div>1840</div>
</div>
<div id="index_artist">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div class="item">Gainsborough, Thomas</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div class="item">Manet, Edouard</div>
<div class="item">Miró, Joan</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="container">
<div class="row">
<div class="artist">
<p>Gainsborough, Thomas</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>14 May 1727 — 02 Aug 1788</span>
<a href="https://en.wikipedia.org/wiki/Thomas_Gainsborough">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1745</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1745/clayton-jones.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Clayton Jones</div>
</div>
</div>
<div class="year">
<p>1748</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/artist-with-wife-and-daughter.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Artist With Wife And Daughter</div>
</div>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/cornard-wood-near-sudburry-suffolk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Cornard Wood, near Sudburry, Suffolk</div>
</div>
</div>
<div class="year">
<p>1750</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1750/mr-and-mrs-andrews.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Mr and Mrs Andrews</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1779</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1779/the-blue-boy.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Blue Boy</div>
</div>
</div>
<div class="year">
<p>1785</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1785/the-morning-walk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Morning Walk</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Manet, Édouard</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>03 Jan 1832 — 30 Apr 1883</span>
<a href="https://en.wikipedia.org/wiki/Édouard_Manet">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1863</p>
<div class="artwork">
<a href="artist/manet-eduoard/1863/olympia.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Olympia</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1863/the-luncheon-on-the-grass.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Luncheon on the Grass</div>
</div>
</div>
<div class="year">
<p>1864</p>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-with-carp.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Carp</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-fruits-on-a-table.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life: Fruits on a Table</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/branch-of-white-peonies-and-secateurs.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Branch of White Peonies and Secateurs</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1865</p>
<div class="artwork">
<a href="artist/manet-eduoard/1865/woman-at-the-races.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Woman at the Races</div>
</div>
</div>
<div class="year">
<p>1874</p>
<div class="artwork">
<a href="artist/manet-eduoard/1874/the-monet-family-in-their-garden-at-argenteuil.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Monet Family in Their Garden at Argenteuil</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Miró, Joan</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>20 Apr 1893 — 25 Dec 1983</span>
<a href="https://en.wikipedia.org/wiki/Joan_Miró">© Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
</div>Edit
Since the position() of an element will vary depending on the scroll position of its offset parent, I recommend including the <section> element's scroll position in the scrollLeft calculation. I've edited my code (above) accordingly:
scrollLeft: $section.scrollLeft() + $target.position().left
Edit
To minimize repeated code, I'd get the year from the clicked element and add that to your class selector. I'm using a data attribute just to keep the data separated from what's displayed, but you could also just use the text() of the clicked year element. Something like this:
<div id="index_year">
<div data-year="1777">1777</div>
<div data-year="1899">1899</div>
<div data-year="1900">1900</div>
....
</div>
$('#index_year div').on('click', function(e)
let year = $(this).data('year');
$sections.each(function()
let $section = $(this);
let $target = $('.anno_' + year, $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);
Here's a working example.
answered Mar 25 at 23:10
showdevshowdev
21.6k14 gold badges36 silver badges55 bronze badges
Thanks @showdev, highly appreciated! How would I best approach to alter the code in such a way so it also works after a user has been 'scrolling around' in one or more of the parent divs? Do I for example first reset them all and then execute it again?
– Jordy
Mar 25 at 23:56
Since theposition()of an element will vary depending on the scroll position of its offset parent, I recommend including the<section>element's scroll position in thescrollLeftcalculation. I've edited my answer accordingly.
– showdev
Mar 26 at 0:05
I am repeating the code you wrote for every 'year' button. This means that the bit of code appears hundreds of times soon. How do I best prevent this repetitive appearance of script? Do I target all child divs with a class similar to the ID of the year button clicked (for example 'anno_1777')?
– Jordy
Mar 26 at 1:13
I'd grab the year value from the clicked element and use that to build your class selector. I added an example to my answer.
– showdev
Mar 26 at 1:35
how would I best add a class to the sections that do not contain the year value I click on? e.g. clicking on 1777 calls all 1777 paintings, however adds a class to the sections without paintings from 1777.... (so I can then use that class to slightly fade these sections out). Not a clue when to fade these back in... that's for me to figure out later -_-" Thousand times thanks!
– Jordy
Mar 27 at 13:57
|
show 6 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55347349%2fhow-to-simultaneously-align-child-divs-in-multiple-parent-divs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
All <section> elements get scrolled to the same position.
Note that position() returns "coordinates of the first element in the set of matched elements".
So $('.anno_1777').position() gets the position of the first .anno_1777 element in any section.
Then all sections are scrolled to that same pixel position.
I suggest using selector context to target the .anno_1777 element within each <section>:
$('.anno_1777', this)
To do so, iterate through all the sections using jQuery's each().
This also allows you to ensure the appropriate element exists in each <section> before animating it.
var $sections = $('section');
$('#anno_1777').on('click', function(e)
$sections.each(function()
let $section = $(this);
let $target = $('.anno_1777', $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);html,
body
margin: 0;
padding: 0;
/* F O N T */
@font-face
font-family: Cinetype;
src: url(/assets/fonts/GT-Cinetype-Mono.ttf);
@font-face
font-family: America;
src: url(/assets/fonts/GT-America-Mono-Regular.ttf);
/* S E L E C T*/
img
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
::selection,
::-moz-selection
background: WhiteSmoke;
/* S C R O L L B A R */
::-webkit-scrollbar
box-sizing: border-box;
width: 16px;
border: none;
::-webkit-scrollbar-track
box-sizing: border-box;
border-top: none;
border-right: 1px solid #ececec;
border-bottom: none;
border-left: 1px solid #ececec;
background: #f5f5f5;
::-webkit-scrollbar-thumb
box-sizing: border-box;
height: 100px;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
border-top: none;
border-bottom: none;
background: white;
::-webkit-scrollbar-track:horizontal
box-sizing: border-box;
border-top: 1px solid #ececec;
border-right: none;
border-bottom: 1px solid #ececec;
border-left: none;
background: #f5f5f5;
::-webkit-scrollbar-thumb:horizontal
border-left: none;
border-right: none;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
width: 100px;
::-webkit-scrollbar-thumb:window-inactive
background: white;
header
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 16px;
background: white;
z-index: 3;
height: 48px;
border-bottom: 1px solid #ececec;
color: royalblue;
text-transform: lowercase;
header span#note
position: relative;
float: right;
color: silver;
div#index_name,
div#index_year
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
z-index: 3;
color: royalblue;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
div#index_name
top: 48px;
height: 32px;
border-bottom: 1px solid #ececec;
div#index_year
top: 80px;
height: 48px;
display: flex;
/* displays flex-items (children) inline */
overflow: scroll;
overflow-y: hidden;
border-bottom: none;
div#index_name div,
div#index_year div
box-sizing: border-box;
margin: auto;
align-self: stretch;
flex-grow: 1;
text-align: center;
height: 100%;
padding: 8px 0 0 0;
vertical-align: middle;
cursor: pointer;
border-left: 1px solid #ececec;
color: Silver;
background: white;
div#index_year div
padding: 8px 16px;
display: table-row;
div#index_name div:hover
color: green;
background: #f5f5f5;
div#index_year div:hover
color: tomato;
background: #f5f5f5;
div#index_name>div:first-of-type,
div#index_year>div:first-of-type
border-left: none;
#anno_1777
color: pink !important;
div#index_artist
position: fixed;
left: 0;
margin-left: -176px;
width: 240px;
top: 128px;
bottom: 0;
box-sizing: border-box;
padding: 0;
z-index: 2;
overflow: scroll;
overflow-x: hidden;
transition: margin 200ms;
div#index_artist:hover
margin-left: 0;
div#index_artist:hover~div#container
padding-left: 240px;
div#index_artist div,
div#index_artist div.item
position: relative;
float: left;
width: 100%;
color: silver;
padding: 8px 20px 8px 16px;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
background: white;
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
cursor: default;
text-align: right;
transition: padding 200ms, color 200ms;
div#index_artist div.item
text-align: left;
cursor: pointer;
div#index_artist div.item:hover
color: green;
padding: 16px 20px 16px 16px;
div#container
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 128px 0 0 64px;
display: block;
margin: 0;
transition: padding 200ms;
div.row
position: relative;
width: 100%;
height: 316px;
box-sizing: border-box;
padding: 0;
margin: 0;
display: flex;
overflow: hidden;
section
position: absolute;
left: 224px;
right: 0px;
height: 316px;
background: white;
box-sizing: border-box;
display: flex;
overflow: scroll;
overflow-y: hidden;
padding: 0;
margin: 0;
background: #f5f5f5;
div.artist
position: relative;
height: 316px;
width: 224px;
box-sizing: border-box;
border-right: 1px solid #ececec;
border-left: none;
border-bottom: 1px solid #ececec;
padding: 16px;
margin: 0;
display: block;
background: white;
div.about
position: absolute;
box-sizing: border-box;
float: left;
padding: 6px 0 0 0;
margin: 196px 0 0 0;
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 12px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
color: Silver;
width: 100%;
height: 32px;
overflow: hidden;
p.info
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
position: absolute;
top: 48px;
border-top: 1px solid #ececec;
left: 0;
width: 224px;
height: 267px;
box-sizing: border-box;
padding: 16px 16px 0 16px;
overflow: hidden;
p.info span
margin: 0;
padding: 0 0 10px 0;
width: 100%;
display: block;
position: relative;
p.info a:link,
p.info a:visited,
p.info a:active
color: Silver;
text-decoration: none;
p.info a:hover
color: RoyalBlue;
text-decoration: none;
div.year
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0;
margin: 0;
background: white;
border-right: 1px solid #ececec;
display: table-row;
div.empty
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0 500px;
margin: 0;
background: #f5f5f5;
border-right: none;
display: table-row;
div.year>div:first-of-type
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 16px;
margin: 0;
display: table-cell;
height: 252px;
div.artwork
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 0;
margin: 0;
display: table-cell;
height: 252px;
div.artwork img
position: relative;
box-sizing: border-box;
float: left;
padding: 0;
margin: 0;
display: inline-block;
height: 196px;
div.year p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
width: 100%;
height: 49px;
padding: 16px;
text-align: left;
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
color: Tomato;
div.artist p
color: Green;
div.artist p.info
color: Silver;
text-transform: none;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
font-variant-ligatures: none;
padding: 0;
margin: 0;
/*
div#time
position: absolute;
background: blue;
padding:0;
margin:48px 0 0 0;
overflow-y: scroll;
overflow-x: hidden;
div.year
position: relative;
float: left;
background: silver;
padding:0;
margin:0;
div.artist
position: relative;
float: left;
background: green;
padding:0 16px 16px 0;
margin:0;
article
margin: 0;
padding: 0;
background-color: orange;
display: inline-block;
box-sizing: border-box;
vertical-align: bottom;
white-space:nowrap;
img
padding: 0;
margin: 0;
display: block;
height: 100px;
img:hover
z-index: 3;
height: 300px;
figure
padding: 0;
margin: 16px 0 0 16px;
display: table;
position: relative;
float: left;
figure img
padding: 0;
margin: 0;
display: block;
figcaption
display: table-caption;
caption-side: bottom;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
padding: 0;
margin: 0;
p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
margin: 0;
padding: 0 0 8px 0;
h1, h2
padding:16px 0 0 16px;
*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<p>Paintings.Directory<span id="note">about</span></p>
</header>
<div id="index_name">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="index_year">
<div>1900</div>
<div>1899</div>
<div id="anno_1777">1777</div>
<div>1897</div>
<div>1896</div>
<div>1895</div>
<div>1894</div>
<div>1893</div>
<div>1892</div>
<div>1891</div>
<div>1890</div>
<div>1889</div>
<div>1888</div>
<div>1887</div>
<div>1886</div>
<div>1885</div>
<div>1884</div>
<div>1883</div>
<div>1882</div>
<div>1881</div>
<div>1880</div>
<div>1879</div>
<div>1878</div>
<div>1877</div>
<div>1876</div>
<div>1875</div>
<div>1874</div>
<div>1873</div>
<div>1872</div>
<div>1871</div>
<div>1870</div>
<div>1869</div>
<div>1868</div>
<div>1867</div>
<div>1866</div>
<div>1865</div>
<div>1864</div>
<div>1863</div>
<div>1862</div>
<div>1861</div>
<div>1860</div>
<div>1859</div>
<div>1858</div>
<div>1857</div>
<div>1856</div>
<div>1855</div>
<div>1854</div>
<div>1853</div>
<div>1852</div>
<div>1851</div>
<div>1850</div>
<div>1849</div>
<div>1848</div>
<div>1847</div>
<div>1846</div>
<div>1845</div>
<div>1844</div>
<div>1843</div>
<div>1842</div>
<div>1841</div>
<div>1840</div>
</div>
<div id="index_artist">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div class="item">Gainsborough, Thomas</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div class="item">Manet, Edouard</div>
<div class="item">Miró, Joan</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="container">
<div class="row">
<div class="artist">
<p>Gainsborough, Thomas</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>14 May 1727 — 02 Aug 1788</span>
<a href="https://en.wikipedia.org/wiki/Thomas_Gainsborough">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1745</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1745/clayton-jones.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Clayton Jones</div>
</div>
</div>
<div class="year">
<p>1748</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/artist-with-wife-and-daughter.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Artist With Wife And Daughter</div>
</div>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/cornard-wood-near-sudburry-suffolk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Cornard Wood, near Sudburry, Suffolk</div>
</div>
</div>
<div class="year">
<p>1750</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1750/mr-and-mrs-andrews.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Mr and Mrs Andrews</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1779</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1779/the-blue-boy.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Blue Boy</div>
</div>
</div>
<div class="year">
<p>1785</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1785/the-morning-walk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Morning Walk</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Manet, Édouard</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>03 Jan 1832 — 30 Apr 1883</span>
<a href="https://en.wikipedia.org/wiki/Édouard_Manet">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1863</p>
<div class="artwork">
<a href="artist/manet-eduoard/1863/olympia.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Olympia</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1863/the-luncheon-on-the-grass.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Luncheon on the Grass</div>
</div>
</div>
<div class="year">
<p>1864</p>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-with-carp.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Carp</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-fruits-on-a-table.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life: Fruits on a Table</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/branch-of-white-peonies-and-secateurs.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Branch of White Peonies and Secateurs</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1865</p>
<div class="artwork">
<a href="artist/manet-eduoard/1865/woman-at-the-races.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Woman at the Races</div>
</div>
</div>
<div class="year">
<p>1874</p>
<div class="artwork">
<a href="artist/manet-eduoard/1874/the-monet-family-in-their-garden-at-argenteuil.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Monet Family in Their Garden at Argenteuil</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Miró, Joan</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>20 Apr 1893 — 25 Dec 1983</span>
<a href="https://en.wikipedia.org/wiki/Joan_Miró">© Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
</div>Edit
Since the position() of an element will vary depending on the scroll position of its offset parent, I recommend including the <section> element's scroll position in the scrollLeft calculation. I've edited my code (above) accordingly:
scrollLeft: $section.scrollLeft() + $target.position().left
Edit
To minimize repeated code, I'd get the year from the clicked element and add that to your class selector. I'm using a data attribute just to keep the data separated from what's displayed, but you could also just use the text() of the clicked year element. Something like this:
<div id="index_year">
<div data-year="1777">1777</div>
<div data-year="1899">1899</div>
<div data-year="1900">1900</div>
....
</div>
$('#index_year div').on('click', function(e)
let year = $(this).data('year');
$sections.each(function()
let $section = $(this);
let $target = $('.anno_' + year, $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);
Here's a working example.
answered Mar 25 at 23:10
showdevshowdev
21.6k14 gold badges36 silver badges55 bronze badges
Thanks @showdev, highly appreciated! How would I best approach to alter the code in such a way so it also works after a user has been 'scrolling around' in one or more of the parent divs? Do I for example first reset them all and then execute it again?
– Jordy
Mar 25 at 23:56
Since theposition()of an element will vary depending on the scroll position of its offset parent, I recommend including the<section>element's scroll position in thescrollLeftcalculation. I've edited my answer accordingly.
– showdev
Mar 26 at 0:05
I am repeating the code you wrote for every 'year' button. This means that the bit of code appears hundreds of times soon. How do I best prevent this repetitive appearance of script? Do I target all child divs with a class similar to the ID of the year button clicked (for example 'anno_1777')?
– Jordy
Mar 26 at 1:13
I'd grab the year value from the clicked element and use that to build your class selector. I added an example to my answer.
– showdev
Mar 26 at 1:35
how would I best add a class to the sections that do not contain the year value I click on? e.g. clicking on 1777 calls all 1777 paintings, however adds a class to the sections without paintings from 1777.... (so I can then use that class to slightly fade these sections out). Not a clue when to fade these back in... that's for me to figure out later -_-" Thousand times thanks!
– Jordy
Mar 27 at 13:57
|
show 6 more comments
0
All <section> elements get scrolled to the same position.
Note that position() returns "coordinates of the first element in the set of matched elements".
So $('.anno_1777').position() gets the position of the first .anno_1777 element in any section.
Then all sections are scrolled to that same pixel position.
I suggest using selector context to target the .anno_1777 element within each <section>:
$('.anno_1777', this)
To do so, iterate through all the sections using jQuery's each().
This also allows you to ensure the appropriate element exists in each <section> before animating it.
var $sections = $('section');
$('#anno_1777').on('click', function(e)
$sections.each(function()
let $section = $(this);
let $target = $('.anno_1777', $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);html,
body
margin: 0;
padding: 0;
/* F O N T */
@font-face
font-family: Cinetype;
src: url(/assets/fonts/GT-Cinetype-Mono.ttf);
@font-face
font-family: America;
src: url(/assets/fonts/GT-America-Mono-Regular.ttf);
/* S E L E C T*/
img
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
::selection,
::-moz-selection
background: WhiteSmoke;
/* S C R O L L B A R */
::-webkit-scrollbar
box-sizing: border-box;
width: 16px;
border: none;
::-webkit-scrollbar-track
box-sizing: border-box;
border-top: none;
border-right: 1px solid #ececec;
border-bottom: none;
border-left: 1px solid #ececec;
background: #f5f5f5;
::-webkit-scrollbar-thumb
box-sizing: border-box;
height: 100px;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
border-top: none;
border-bottom: none;
background: white;
::-webkit-scrollbar-track:horizontal
box-sizing: border-box;
border-top: 1px solid #ececec;
border-right: none;
border-bottom: 1px solid #ececec;
border-left: none;
background: #f5f5f5;
::-webkit-scrollbar-thumb:horizontal
border-left: none;
border-right: none;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
width: 100px;
::-webkit-scrollbar-thumb:window-inactive
background: white;
header
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 16px;
background: white;
z-index: 3;
height: 48px;
border-bottom: 1px solid #ececec;
color: royalblue;
text-transform: lowercase;
header span#note
position: relative;
float: right;
color: silver;
div#index_name,
div#index_year
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
z-index: 3;
color: royalblue;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
div#index_name
top: 48px;
height: 32px;
border-bottom: 1px solid #ececec;
div#index_year
top: 80px;
height: 48px;
display: flex;
/* displays flex-items (children) inline */
overflow: scroll;
overflow-y: hidden;
border-bottom: none;
div#index_name div,
div#index_year div
box-sizing: border-box;
margin: auto;
align-self: stretch;
flex-grow: 1;
text-align: center;
height: 100%;
padding: 8px 0 0 0;
vertical-align: middle;
cursor: pointer;
border-left: 1px solid #ececec;
color: Silver;
background: white;
div#index_year div
padding: 8px 16px;
display: table-row;
div#index_name div:hover
color: green;
background: #f5f5f5;
div#index_year div:hover
color: tomato;
background: #f5f5f5;
div#index_name>div:first-of-type,
div#index_year>div:first-of-type
border-left: none;
#anno_1777
color: pink !important;
div#index_artist
position: fixed;
left: 0;
margin-left: -176px;
width: 240px;
top: 128px;
bottom: 0;
box-sizing: border-box;
padding: 0;
z-index: 2;
overflow: scroll;
overflow-x: hidden;
transition: margin 200ms;
div#index_artist:hover
margin-left: 0;
div#index_artist:hover~div#container
padding-left: 240px;
div#index_artist div,
div#index_artist div.item
position: relative;
float: left;
width: 100%;
color: silver;
padding: 8px 20px 8px 16px;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
background: white;
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
cursor: default;
text-align: right;
transition: padding 200ms, color 200ms;
div#index_artist div.item
text-align: left;
cursor: pointer;
div#index_artist div.item:hover
color: green;
padding: 16px 20px 16px 16px;
div#container
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 128px 0 0 64px;
display: block;
margin: 0;
transition: padding 200ms;
div.row
position: relative;
width: 100%;
height: 316px;
box-sizing: border-box;
padding: 0;
margin: 0;
display: flex;
overflow: hidden;
section
position: absolute;
left: 224px;
right: 0px;
height: 316px;
background: white;
box-sizing: border-box;
display: flex;
overflow: scroll;
overflow-y: hidden;
padding: 0;
margin: 0;
background: #f5f5f5;
div.artist
position: relative;
height: 316px;
width: 224px;
box-sizing: border-box;
border-right: 1px solid #ececec;
border-left: none;
border-bottom: 1px solid #ececec;
padding: 16px;
margin: 0;
display: block;
background: white;
div.about
position: absolute;
box-sizing: border-box;
float: left;
padding: 6px 0 0 0;
margin: 196px 0 0 0;
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 12px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
color: Silver;
width: 100%;
height: 32px;
overflow: hidden;
p.info
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
position: absolute;
top: 48px;
border-top: 1px solid #ececec;
left: 0;
width: 224px;
height: 267px;
box-sizing: border-box;
padding: 16px 16px 0 16px;
overflow: hidden;
p.info span
margin: 0;
padding: 0 0 10px 0;
width: 100%;
display: block;
position: relative;
p.info a:link,
p.info a:visited,
p.info a:active
color: Silver;
text-decoration: none;
p.info a:hover
color: RoyalBlue;
text-decoration: none;
div.year
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0;
margin: 0;
background: white;
border-right: 1px solid #ececec;
display: table-row;
div.empty
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0 500px;
margin: 0;
background: #f5f5f5;
border-right: none;
display: table-row;
div.year>div:first-of-type
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 16px;
margin: 0;
display: table-cell;
height: 252px;
div.artwork
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 0;
margin: 0;
display: table-cell;
height: 252px;
div.artwork img
position: relative;
box-sizing: border-box;
float: left;
padding: 0;
margin: 0;
display: inline-block;
height: 196px;
div.year p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
width: 100%;
height: 49px;
padding: 16px;
text-align: left;
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
color: Tomato;
div.artist p
color: Green;
div.artist p.info
color: Silver;
text-transform: none;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
font-variant-ligatures: none;
padding: 0;
margin: 0;
/*
div#time
position: absolute;
background: blue;
padding:0;
margin:48px 0 0 0;
overflow-y: scroll;
overflow-x: hidden;
div.year
position: relative;
float: left;
background: silver;
padding:0;
margin:0;
div.artist
position: relative;
float: left;
background: green;
padding:0 16px 16px 0;
margin:0;
article
margin: 0;
padding: 0;
background-color: orange;
display: inline-block;
box-sizing: border-box;
vertical-align: bottom;
white-space:nowrap;
img
padding: 0;
margin: 0;
display: block;
height: 100px;
img:hover
z-index: 3;
height: 300px;
figure
padding: 0;
margin: 16px 0 0 16px;
display: table;
position: relative;
float: left;
figure img
padding: 0;
margin: 0;
display: block;
figcaption
display: table-caption;
caption-side: bottom;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
padding: 0;
margin: 0;
p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
margin: 0;
padding: 0 0 8px 0;
h1, h2
padding:16px 0 0 16px;
*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<p>Paintings.Directory<span id="note">about</span></p>
</header>
<div id="index_name">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="index_year">
<div>1900</div>
<div>1899</div>
<div id="anno_1777">1777</div>
<div>1897</div>
<div>1896</div>
<div>1895</div>
<div>1894</div>
<div>1893</div>
<div>1892</div>
<div>1891</div>
<div>1890</div>
<div>1889</div>
<div>1888</div>
<div>1887</div>
<div>1886</div>
<div>1885</div>
<div>1884</div>
<div>1883</div>
<div>1882</div>
<div>1881</div>
<div>1880</div>
<div>1879</div>
<div>1878</div>
<div>1877</div>
<div>1876</div>
<div>1875</div>
<div>1874</div>
<div>1873</div>
<div>1872</div>
<div>1871</div>
<div>1870</div>
<div>1869</div>
<div>1868</div>
<div>1867</div>
<div>1866</div>
<div>1865</div>
<div>1864</div>
<div>1863</div>
<div>1862</div>
<div>1861</div>
<div>1860</div>
<div>1859</div>
<div>1858</div>
<div>1857</div>
<div>1856</div>
<div>1855</div>
<div>1854</div>
<div>1853</div>
<div>1852</div>
<div>1851</div>
<div>1850</div>
<div>1849</div>
<div>1848</div>
<div>1847</div>
<div>1846</div>
<div>1845</div>
<div>1844</div>
<div>1843</div>
<div>1842</div>
<div>1841</div>
<div>1840</div>
</div>
<div id="index_artist">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div class="item">Gainsborough, Thomas</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div class="item">Manet, Edouard</div>
<div class="item">Miró, Joan</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="container">
<div class="row">
<div class="artist">
<p>Gainsborough, Thomas</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>14 May 1727 — 02 Aug 1788</span>
<a href="https://en.wikipedia.org/wiki/Thomas_Gainsborough">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1745</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1745/clayton-jones.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Clayton Jones</div>
</div>
</div>
<div class="year">
<p>1748</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/artist-with-wife-and-daughter.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Artist With Wife And Daughter</div>
</div>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/cornard-wood-near-sudburry-suffolk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Cornard Wood, near Sudburry, Suffolk</div>
</div>
</div>
<div class="year">
<p>1750</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1750/mr-and-mrs-andrews.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Mr and Mrs Andrews</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1779</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1779/the-blue-boy.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Blue Boy</div>
</div>
</div>
<div class="year">
<p>1785</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1785/the-morning-walk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Morning Walk</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Manet, Édouard</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>03 Jan 1832 — 30 Apr 1883</span>
<a href="https://en.wikipedia.org/wiki/Édouard_Manet">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1863</p>
<div class="artwork">
<a href="artist/manet-eduoard/1863/olympia.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Olympia</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1863/the-luncheon-on-the-grass.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Luncheon on the Grass</div>
</div>
</div>
<div class="year">
<p>1864</p>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-with-carp.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Carp</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-fruits-on-a-table.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life: Fruits on a Table</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/branch-of-white-peonies-and-secateurs.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Branch of White Peonies and Secateurs</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1865</p>
<div class="artwork">
<a href="artist/manet-eduoard/1865/woman-at-the-races.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Woman at the Races</div>
</div>
</div>
<div class="year">
<p>1874</p>
<div class="artwork">
<a href="artist/manet-eduoard/1874/the-monet-family-in-their-garden-at-argenteuil.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Monet Family in Their Garden at Argenteuil</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Miró, Joan</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>20 Apr 1893 — 25 Dec 1983</span>
<a href="https://en.wikipedia.org/wiki/Joan_Miró">© Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
</div>Edit
Since the position() of an element will vary depending on the scroll position of its offset parent, I recommend including the <section> element's scroll position in the scrollLeft calculation. I've edited my code (above) accordingly:
scrollLeft: $section.scrollLeft() + $target.position().left
Edit
To minimize repeated code, I'd get the year from the clicked element and add that to your class selector. I'm using a data attribute just to keep the data separated from what's displayed, but you could also just use the text() of the clicked year element. Something like this:
<div id="index_year">
<div data-year="1777">1777</div>
<div data-year="1899">1899</div>
<div data-year="1900">1900</div>
....
</div>
$('#index_year div').on('click', function(e)
let year = $(this).data('year');
$sections.each(function()
let $section = $(this);
let $target = $('.anno_' + year, $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);
Here's a working example.
answered Mar 25 at 23:10
showdevshowdev
21.6k14 gold badges36 silver badges55 bronze badges
Thanks @showdev, highly appreciated! How would I best approach to alter the code in such a way so it also works after a user has been 'scrolling around' in one or more of the parent divs? Do I for example first reset them all and then execute it again?
– Jordy
Mar 25 at 23:56
Since theposition()of an element will vary depending on the scroll position of its offset parent, I recommend including the<section>element's scroll position in thescrollLeftcalculation. I've edited my answer accordingly.
– showdev
Mar 26 at 0:05
I am repeating the code you wrote for every 'year' button. This means that the bit of code appears hundreds of times soon. How do I best prevent this repetitive appearance of script? Do I target all child divs with a class similar to the ID of the year button clicked (for example 'anno_1777')?
– Jordy
Mar 26 at 1:13
I'd grab the year value from the clicked element and use that to build your class selector. I added an example to my answer.
– showdev
Mar 26 at 1:35
how would I best add a class to the sections that do not contain the year value I click on? e.g. clicking on 1777 calls all 1777 paintings, however adds a class to the sections without paintings from 1777.... (so I can then use that class to slightly fade these sections out). Not a clue when to fade these back in... that's for me to figure out later -_-" Thousand times thanks!
– Jordy
Mar 27 at 13:57
|
show 6 more comments
0
0
0
All <section> elements get scrolled to the same position.
Note that position() returns "coordinates of the first element in the set of matched elements".
So $('.anno_1777').position() gets the position of the first .anno_1777 element in any section.
Then all sections are scrolled to that same pixel position.
I suggest using selector context to target the .anno_1777 element within each <section>:
$('.anno_1777', this)
To do so, iterate through all the sections using jQuery's each().
This also allows you to ensure the appropriate element exists in each <section> before animating it.
var $sections = $('section');
$('#anno_1777').on('click', function(e)
$sections.each(function()
let $section = $(this);
let $target = $('.anno_1777', $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);html,
body
margin: 0;
padding: 0;
/* F O N T */
@font-face
font-family: Cinetype;
src: url(/assets/fonts/GT-Cinetype-Mono.ttf);
@font-face
font-family: America;
src: url(/assets/fonts/GT-America-Mono-Regular.ttf);
/* S E L E C T*/
img
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
::selection,
::-moz-selection
background: WhiteSmoke;
/* S C R O L L B A R */
::-webkit-scrollbar
box-sizing: border-box;
width: 16px;
border: none;
::-webkit-scrollbar-track
box-sizing: border-box;
border-top: none;
border-right: 1px solid #ececec;
border-bottom: none;
border-left: 1px solid #ececec;
background: #f5f5f5;
::-webkit-scrollbar-thumb
box-sizing: border-box;
height: 100px;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
border-top: none;
border-bottom: none;
background: white;
::-webkit-scrollbar-track:horizontal
box-sizing: border-box;
border-top: 1px solid #ececec;
border-right: none;
border-bottom: 1px solid #ececec;
border-left: none;
background: #f5f5f5;
::-webkit-scrollbar-thumb:horizontal
border-left: none;
border-right: none;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
width: 100px;
::-webkit-scrollbar-thumb:window-inactive
background: white;
header
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 16px;
background: white;
z-index: 3;
height: 48px;
border-bottom: 1px solid #ececec;
color: royalblue;
text-transform: lowercase;
header span#note
position: relative;
float: right;
color: silver;
div#index_name,
div#index_year
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
z-index: 3;
color: royalblue;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
div#index_name
top: 48px;
height: 32px;
border-bottom: 1px solid #ececec;
div#index_year
top: 80px;
height: 48px;
display: flex;
/* displays flex-items (children) inline */
overflow: scroll;
overflow-y: hidden;
border-bottom: none;
div#index_name div,
div#index_year div
box-sizing: border-box;
margin: auto;
align-self: stretch;
flex-grow: 1;
text-align: center;
height: 100%;
padding: 8px 0 0 0;
vertical-align: middle;
cursor: pointer;
border-left: 1px solid #ececec;
color: Silver;
background: white;
div#index_year div
padding: 8px 16px;
display: table-row;
div#index_name div:hover
color: green;
background: #f5f5f5;
div#index_year div:hover
color: tomato;
background: #f5f5f5;
div#index_name>div:first-of-type,
div#index_year>div:first-of-type
border-left: none;
#anno_1777
color: pink !important;
div#index_artist
position: fixed;
left: 0;
margin-left: -176px;
width: 240px;
top: 128px;
bottom: 0;
box-sizing: border-box;
padding: 0;
z-index: 2;
overflow: scroll;
overflow-x: hidden;
transition: margin 200ms;
div#index_artist:hover
margin-left: 0;
div#index_artist:hover~div#container
padding-left: 240px;
div#index_artist div,
div#index_artist div.item
position: relative;
float: left;
width: 100%;
color: silver;
padding: 8px 20px 8px 16px;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
background: white;
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
cursor: default;
text-align: right;
transition: padding 200ms, color 200ms;
div#index_artist div.item
text-align: left;
cursor: pointer;
div#index_artist div.item:hover
color: green;
padding: 16px 20px 16px 16px;
div#container
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 128px 0 0 64px;
display: block;
margin: 0;
transition: padding 200ms;
div.row
position: relative;
width: 100%;
height: 316px;
box-sizing: border-box;
padding: 0;
margin: 0;
display: flex;
overflow: hidden;
section
position: absolute;
left: 224px;
right: 0px;
height: 316px;
background: white;
box-sizing: border-box;
display: flex;
overflow: scroll;
overflow-y: hidden;
padding: 0;
margin: 0;
background: #f5f5f5;
div.artist
position: relative;
height: 316px;
width: 224px;
box-sizing: border-box;
border-right: 1px solid #ececec;
border-left: none;
border-bottom: 1px solid #ececec;
padding: 16px;
margin: 0;
display: block;
background: white;
div.about
position: absolute;
box-sizing: border-box;
float: left;
padding: 6px 0 0 0;
margin: 196px 0 0 0;
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 12px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
color: Silver;
width: 100%;
height: 32px;
overflow: hidden;
p.info
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
position: absolute;
top: 48px;
border-top: 1px solid #ececec;
left: 0;
width: 224px;
height: 267px;
box-sizing: border-box;
padding: 16px 16px 0 16px;
overflow: hidden;
p.info span
margin: 0;
padding: 0 0 10px 0;
width: 100%;
display: block;
position: relative;
p.info a:link,
p.info a:visited,
p.info a:active
color: Silver;
text-decoration: none;
p.info a:hover
color: RoyalBlue;
text-decoration: none;
div.year
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0;
margin: 0;
background: white;
border-right: 1px solid #ececec;
display: table-row;
div.empty
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0 500px;
margin: 0;
background: #f5f5f5;
border-right: none;
display: table-row;
div.year>div:first-of-type
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 16px;
margin: 0;
display: table-cell;
height: 252px;
div.artwork
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 0;
margin: 0;
display: table-cell;
height: 252px;
div.artwork img
position: relative;
box-sizing: border-box;
float: left;
padding: 0;
margin: 0;
display: inline-block;
height: 196px;
div.year p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
width: 100%;
height: 49px;
padding: 16px;
text-align: left;
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
color: Tomato;
div.artist p
color: Green;
div.artist p.info
color: Silver;
text-transform: none;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
font-variant-ligatures: none;
padding: 0;
margin: 0;
/*
div#time
position: absolute;
background: blue;
padding:0;
margin:48px 0 0 0;
overflow-y: scroll;
overflow-x: hidden;
div.year
position: relative;
float: left;
background: silver;
padding:0;
margin:0;
div.artist
position: relative;
float: left;
background: green;
padding:0 16px 16px 0;
margin:0;
article
margin: 0;
padding: 0;
background-color: orange;
display: inline-block;
box-sizing: border-box;
vertical-align: bottom;
white-space:nowrap;
img
padding: 0;
margin: 0;
display: block;
height: 100px;
img:hover
z-index: 3;
height: 300px;
figure
padding: 0;
margin: 16px 0 0 16px;
display: table;
position: relative;
float: left;
figure img
padding: 0;
margin: 0;
display: block;
figcaption
display: table-caption;
caption-side: bottom;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
padding: 0;
margin: 0;
p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
margin: 0;
padding: 0 0 8px 0;
h1, h2
padding:16px 0 0 16px;
*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<p>Paintings.Directory<span id="note">about</span></p>
</header>
<div id="index_name">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="index_year">
<div>1900</div>
<div>1899</div>
<div id="anno_1777">1777</div>
<div>1897</div>
<div>1896</div>
<div>1895</div>
<div>1894</div>
<div>1893</div>
<div>1892</div>
<div>1891</div>
<div>1890</div>
<div>1889</div>
<div>1888</div>
<div>1887</div>
<div>1886</div>
<div>1885</div>
<div>1884</div>
<div>1883</div>
<div>1882</div>
<div>1881</div>
<div>1880</div>
<div>1879</div>
<div>1878</div>
<div>1877</div>
<div>1876</div>
<div>1875</div>
<div>1874</div>
<div>1873</div>
<div>1872</div>
<div>1871</div>
<div>1870</div>
<div>1869</div>
<div>1868</div>
<div>1867</div>
<div>1866</div>
<div>1865</div>
<div>1864</div>
<div>1863</div>
<div>1862</div>
<div>1861</div>
<div>1860</div>
<div>1859</div>
<div>1858</div>
<div>1857</div>
<div>1856</div>
<div>1855</div>
<div>1854</div>
<div>1853</div>
<div>1852</div>
<div>1851</div>
<div>1850</div>
<div>1849</div>
<div>1848</div>
<div>1847</div>
<div>1846</div>
<div>1845</div>
<div>1844</div>
<div>1843</div>
<div>1842</div>
<div>1841</div>
<div>1840</div>
</div>
<div id="index_artist">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div class="item">Gainsborough, Thomas</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div class="item">Manet, Edouard</div>
<div class="item">Miró, Joan</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="container">
<div class="row">
<div class="artist">
<p>Gainsborough, Thomas</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>14 May 1727 — 02 Aug 1788</span>
<a href="https://en.wikipedia.org/wiki/Thomas_Gainsborough">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1745</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1745/clayton-jones.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Clayton Jones</div>
</div>
</div>
<div class="year">
<p>1748</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/artist-with-wife-and-daughter.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Artist With Wife And Daughter</div>
</div>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/cornard-wood-near-sudburry-suffolk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Cornard Wood, near Sudburry, Suffolk</div>
</div>
</div>
<div class="year">
<p>1750</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1750/mr-and-mrs-andrews.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Mr and Mrs Andrews</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1779</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1779/the-blue-boy.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Blue Boy</div>
</div>
</div>
<div class="year">
<p>1785</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1785/the-morning-walk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Morning Walk</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Manet, Édouard</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>03 Jan 1832 — 30 Apr 1883</span>
<a href="https://en.wikipedia.org/wiki/Édouard_Manet">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1863</p>
<div class="artwork">
<a href="artist/manet-eduoard/1863/olympia.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Olympia</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1863/the-luncheon-on-the-grass.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Luncheon on the Grass</div>
</div>
</div>
<div class="year">
<p>1864</p>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-with-carp.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Carp</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-fruits-on-a-table.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life: Fruits on a Table</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/branch-of-white-peonies-and-secateurs.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Branch of White Peonies and Secateurs</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1865</p>
<div class="artwork">
<a href="artist/manet-eduoard/1865/woman-at-the-races.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Woman at the Races</div>
</div>
</div>
<div class="year">
<p>1874</p>
<div class="artwork">
<a href="artist/manet-eduoard/1874/the-monet-family-in-their-garden-at-argenteuil.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Monet Family in Their Garden at Argenteuil</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Miró, Joan</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>20 Apr 1893 — 25 Dec 1983</span>
<a href="https://en.wikipedia.org/wiki/Joan_Miró">© Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
</div>Edit
Since the position() of an element will vary depending on the scroll position of its offset parent, I recommend including the <section> element's scroll position in the scrollLeft calculation. I've edited my code (above) accordingly:
scrollLeft: $section.scrollLeft() + $target.position().left
Edit
To minimize repeated code, I'd get the year from the clicked element and add that to your class selector. I'm using a data attribute just to keep the data separated from what's displayed, but you could also just use the text() of the clicked year element. Something like this:
<div id="index_year">
<div data-year="1777">1777</div>
<div data-year="1899">1899</div>
<div data-year="1900">1900</div>
....
</div>
$('#index_year div').on('click', function(e)
let year = $(this).data('year');
$sections.each(function()
let $section = $(this);
let $target = $('.anno_' + year, $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);
Here's a working example.
answered Mar 25 at 23:10
showdevshowdev
21.6k14 gold badges36 silver badges55 bronze badges
All <section> elements get scrolled to the same position.
Note that position() returns "coordinates of the first element in the set of matched elements".
So $('.anno_1777').position() gets the position of the first .anno_1777 element in any section.
Then all sections are scrolled to that same pixel position.
I suggest using selector context to target the .anno_1777 element within each <section>:
$('.anno_1777', this)
To do so, iterate through all the sections using jQuery's each().
This also allows you to ensure the appropriate element exists in each <section> before animating it.
var $sections = $('section');
$('#anno_1777').on('click', function(e)
$sections.each(function()
let $section = $(this);
let $target = $('.anno_1777', $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);html,
body
margin: 0;
padding: 0;
/* F O N T */
@font-face
font-family: Cinetype;
src: url(/assets/fonts/GT-Cinetype-Mono.ttf);
@font-face
font-family: America;
src: url(/assets/fonts/GT-America-Mono-Regular.ttf);
/* S E L E C T*/
img
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
::selection,
::-moz-selection
background: WhiteSmoke;
/* S C R O L L B A R */
::-webkit-scrollbar
box-sizing: border-box;
width: 16px;
border: none;
::-webkit-scrollbar-track
box-sizing: border-box;
border-top: none;
border-right: 1px solid #ececec;
border-bottom: none;
border-left: 1px solid #ececec;
background: #f5f5f5;
::-webkit-scrollbar-thumb
box-sizing: border-box;
height: 100px;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
border-top: none;
border-bottom: none;
background: white;
::-webkit-scrollbar-track:horizontal
box-sizing: border-box;
border-top: 1px solid #ececec;
border-right: none;
border-bottom: 1px solid #ececec;
border-left: none;
background: #f5f5f5;
::-webkit-scrollbar-thumb:horizontal
border-left: none;
border-right: none;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
width: 100px;
::-webkit-scrollbar-thumb:window-inactive
background: white;
header
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 16px;
background: white;
z-index: 3;
height: 48px;
border-bottom: 1px solid #ececec;
color: royalblue;
text-transform: lowercase;
header span#note
position: relative;
float: right;
color: silver;
div#index_name,
div#index_year
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
z-index: 3;
color: royalblue;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
div#index_name
top: 48px;
height: 32px;
border-bottom: 1px solid #ececec;
div#index_year
top: 80px;
height: 48px;
display: flex;
/* displays flex-items (children) inline */
overflow: scroll;
overflow-y: hidden;
border-bottom: none;
div#index_name div,
div#index_year div
box-sizing: border-box;
margin: auto;
align-self: stretch;
flex-grow: 1;
text-align: center;
height: 100%;
padding: 8px 0 0 0;
vertical-align: middle;
cursor: pointer;
border-left: 1px solid #ececec;
color: Silver;
background: white;
div#index_year div
padding: 8px 16px;
display: table-row;
div#index_name div:hover
color: green;
background: #f5f5f5;
div#index_year div:hover
color: tomato;
background: #f5f5f5;
div#index_name>div:first-of-type,
div#index_year>div:first-of-type
border-left: none;
#anno_1777
color: pink !important;
div#index_artist
position: fixed;
left: 0;
margin-left: -176px;
width: 240px;
top: 128px;
bottom: 0;
box-sizing: border-box;
padding: 0;
z-index: 2;
overflow: scroll;
overflow-x: hidden;
transition: margin 200ms;
div#index_artist:hover
margin-left: 0;
div#index_artist:hover~div#container
padding-left: 240px;
div#index_artist div,
div#index_artist div.item
position: relative;
float: left;
width: 100%;
color: silver;
padding: 8px 20px 8px 16px;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
background: white;
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
cursor: default;
text-align: right;
transition: padding 200ms, color 200ms;
div#index_artist div.item
text-align: left;
cursor: pointer;
div#index_artist div.item:hover
color: green;
padding: 16px 20px 16px 16px;
div#container
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 128px 0 0 64px;
display: block;
margin: 0;
transition: padding 200ms;
div.row
position: relative;
width: 100%;
height: 316px;
box-sizing: border-box;
padding: 0;
margin: 0;
display: flex;
overflow: hidden;
section
position: absolute;
left: 224px;
right: 0px;
height: 316px;
background: white;
box-sizing: border-box;
display: flex;
overflow: scroll;
overflow-y: hidden;
padding: 0;
margin: 0;
background: #f5f5f5;
div.artist
position: relative;
height: 316px;
width: 224px;
box-sizing: border-box;
border-right: 1px solid #ececec;
border-left: none;
border-bottom: 1px solid #ececec;
padding: 16px;
margin: 0;
display: block;
background: white;
div.about
position: absolute;
box-sizing: border-box;
float: left;
padding: 6px 0 0 0;
margin: 196px 0 0 0;
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 12px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
color: Silver;
width: 100%;
height: 32px;
overflow: hidden;
p.info
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
position: absolute;
top: 48px;
border-top: 1px solid #ececec;
left: 0;
width: 224px;
height: 267px;
box-sizing: border-box;
padding: 16px 16px 0 16px;
overflow: hidden;
p.info span
margin: 0;
padding: 0 0 10px 0;
width: 100%;
display: block;
position: relative;
p.info a:link,
p.info a:visited,
p.info a:active
color: Silver;
text-decoration: none;
p.info a:hover
color: RoyalBlue;
text-decoration: none;
div.year
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0;
margin: 0;
background: white;
border-right: 1px solid #ececec;
display: table-row;
div.empty
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0 500px;
margin: 0;
background: #f5f5f5;
border-right: none;
display: table-row;
div.year>div:first-of-type
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 16px;
margin: 0;
display: table-cell;
height: 252px;
div.artwork
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 0;
margin: 0;
display: table-cell;
height: 252px;
div.artwork img
position: relative;
box-sizing: border-box;
float: left;
padding: 0;
margin: 0;
display: inline-block;
height: 196px;
div.year p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
width: 100%;
height: 49px;
padding: 16px;
text-align: left;
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
color: Tomato;
div.artist p
color: Green;
div.artist p.info
color: Silver;
text-transform: none;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
font-variant-ligatures: none;
padding: 0;
margin: 0;
/*
div#time
position: absolute;
background: blue;
padding:0;
margin:48px 0 0 0;
overflow-y: scroll;
overflow-x: hidden;
div.year
position: relative;
float: left;
background: silver;
padding:0;
margin:0;
div.artist
position: relative;
float: left;
background: green;
padding:0 16px 16px 0;
margin:0;
article
margin: 0;
padding: 0;
background-color: orange;
display: inline-block;
box-sizing: border-box;
vertical-align: bottom;
white-space:nowrap;
img
padding: 0;
margin: 0;
display: block;
height: 100px;
img:hover
z-index: 3;
height: 300px;
figure
padding: 0;
margin: 16px 0 0 16px;
display: table;
position: relative;
float: left;
figure img
padding: 0;
margin: 0;
display: block;
figcaption
display: table-caption;
caption-side: bottom;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
padding: 0;
margin: 0;
p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
margin: 0;
padding: 0 0 8px 0;
h1, h2
padding:16px 0 0 16px;
*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<p>Paintings.Directory<span id="note">about</span></p>
</header>
<div id="index_name">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="index_year">
<div>1900</div>
<div>1899</div>
<div id="anno_1777">1777</div>
<div>1897</div>
<div>1896</div>
<div>1895</div>
<div>1894</div>
<div>1893</div>
<div>1892</div>
<div>1891</div>
<div>1890</div>
<div>1889</div>
<div>1888</div>
<div>1887</div>
<div>1886</div>
<div>1885</div>
<div>1884</div>
<div>1883</div>
<div>1882</div>
<div>1881</div>
<div>1880</div>
<div>1879</div>
<div>1878</div>
<div>1877</div>
<div>1876</div>
<div>1875</div>
<div>1874</div>
<div>1873</div>
<div>1872</div>
<div>1871</div>
<div>1870</div>
<div>1869</div>
<div>1868</div>
<div>1867</div>
<div>1866</div>
<div>1865</div>
<div>1864</div>
<div>1863</div>
<div>1862</div>
<div>1861</div>
<div>1860</div>
<div>1859</div>
<div>1858</div>
<div>1857</div>
<div>1856</div>
<div>1855</div>
<div>1854</div>
<div>1853</div>
<div>1852</div>
<div>1851</div>
<div>1850</div>
<div>1849</div>
<div>1848</div>
<div>1847</div>
<div>1846</div>
<div>1845</div>
<div>1844</div>
<div>1843</div>
<div>1842</div>
<div>1841</div>
<div>1840</div>
</div>
<div id="index_artist">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div class="item">Gainsborough, Thomas</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div class="item">Manet, Edouard</div>
<div class="item">Miró, Joan</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="container">
<div class="row">
<div class="artist">
<p>Gainsborough, Thomas</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>14 May 1727 — 02 Aug 1788</span>
<a href="https://en.wikipedia.org/wiki/Thomas_Gainsborough">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1745</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1745/clayton-jones.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Clayton Jones</div>
</div>
</div>
<div class="year">
<p>1748</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/artist-with-wife-and-daughter.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Artist With Wife And Daughter</div>
</div>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/cornard-wood-near-sudburry-suffolk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Cornard Wood, near Sudburry, Suffolk</div>
</div>
</div>
<div class="year">
<p>1750</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1750/mr-and-mrs-andrews.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Mr and Mrs Andrews</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1779</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1779/the-blue-boy.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Blue Boy</div>
</div>
</div>
<div class="year">
<p>1785</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1785/the-morning-walk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Morning Walk</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Manet, Édouard</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>03 Jan 1832 — 30 Apr 1883</span>
<a href="https://en.wikipedia.org/wiki/Édouard_Manet">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1863</p>
<div class="artwork">
<a href="artist/manet-eduoard/1863/olympia.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Olympia</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1863/the-luncheon-on-the-grass.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Luncheon on the Grass</div>
</div>
</div>
<div class="year">
<p>1864</p>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-with-carp.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Carp</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-fruits-on-a-table.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life: Fruits on a Table</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/branch-of-white-peonies-and-secateurs.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Branch of White Peonies and Secateurs</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1865</p>
<div class="artwork">
<a href="artist/manet-eduoard/1865/woman-at-the-races.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Woman at the Races</div>
</div>
</div>
<div class="year">
<p>1874</p>
<div class="artwork">
<a href="artist/manet-eduoard/1874/the-monet-family-in-their-garden-at-argenteuil.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Monet Family in Their Garden at Argenteuil</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Miró, Joan</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>20 Apr 1893 — 25 Dec 1983</span>
<a href="https://en.wikipedia.org/wiki/Joan_Miró">© Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
</div>Edit
Since the position() of an element will vary depending on the scroll position of its offset parent, I recommend including the <section> element's scroll position in the scrollLeft calculation. I've edited my code (above) accordingly:
scrollLeft: $section.scrollLeft() + $target.position().left
Edit
To minimize repeated code, I'd get the year from the clicked element and add that to your class selector. I'm using a data attribute just to keep the data separated from what's displayed, but you could also just use the text() of the clicked year element. Something like this:
<div id="index_year">
<div data-year="1777">1777</div>
<div data-year="1899">1899</div>
<div data-year="1900">1900</div>
....
</div>
$('#index_year div').on('click', function(e)
let year = $(this).data('year');
$sections.each(function()
let $section = $(this);
let $target = $('.anno_' + year, $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);
Here's a working example.
var $sections = $('section');
$('#anno_1777').on('click', function(e)
$sections.each(function()
let $section = $(this);
let $target = $('.anno_1777', $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);html,
body
margin: 0;
padding: 0;
/* F O N T */
@font-face
font-family: Cinetype;
src: url(/assets/fonts/GT-Cinetype-Mono.ttf);
@font-face
font-family: America;
src: url(/assets/fonts/GT-America-Mono-Regular.ttf);
/* S E L E C T*/
img
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
::selection,
::-moz-selection
background: WhiteSmoke;
/* S C R O L L B A R */
::-webkit-scrollbar
box-sizing: border-box;
width: 16px;
border: none;
::-webkit-scrollbar-track
box-sizing: border-box;
border-top: none;
border-right: 1px solid #ececec;
border-bottom: none;
border-left: 1px solid #ececec;
background: #f5f5f5;
::-webkit-scrollbar-thumb
box-sizing: border-box;
height: 100px;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
border-top: none;
border-bottom: none;
background: white;
::-webkit-scrollbar-track:horizontal
box-sizing: border-box;
border-top: 1px solid #ececec;
border-right: none;
border-bottom: 1px solid #ececec;
border-left: none;
background: #f5f5f5;
::-webkit-scrollbar-thumb:horizontal
border-left: none;
border-right: none;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
width: 100px;
::-webkit-scrollbar-thumb:window-inactive
background: white;
header
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 16px;
background: white;
z-index: 3;
height: 48px;
border-bottom: 1px solid #ececec;
color: royalblue;
text-transform: lowercase;
header span#note
position: relative;
float: right;
color: silver;
div#index_name,
div#index_year
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
z-index: 3;
color: royalblue;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
div#index_name
top: 48px;
height: 32px;
border-bottom: 1px solid #ececec;
div#index_year
top: 80px;
height: 48px;
display: flex;
/* displays flex-items (children) inline */
overflow: scroll;
overflow-y: hidden;
border-bottom: none;
div#index_name div,
div#index_year div
box-sizing: border-box;
margin: auto;
align-self: stretch;
flex-grow: 1;
text-align: center;
height: 100%;
padding: 8px 0 0 0;
vertical-align: middle;
cursor: pointer;
border-left: 1px solid #ececec;
color: Silver;
background: white;
div#index_year div
padding: 8px 16px;
display: table-row;
div#index_name div:hover
color: green;
background: #f5f5f5;
div#index_year div:hover
color: tomato;
background: #f5f5f5;
div#index_name>div:first-of-type,
div#index_year>div:first-of-type
border-left: none;
#anno_1777
color: pink !important;
div#index_artist
position: fixed;
left: 0;
margin-left: -176px;
width: 240px;
top: 128px;
bottom: 0;
box-sizing: border-box;
padding: 0;
z-index: 2;
overflow: scroll;
overflow-x: hidden;
transition: margin 200ms;
div#index_artist:hover
margin-left: 0;
div#index_artist:hover~div#container
padding-left: 240px;
div#index_artist div,
div#index_artist div.item
position: relative;
float: left;
width: 100%;
color: silver;
padding: 8px 20px 8px 16px;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
background: white;
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
cursor: default;
text-align: right;
transition: padding 200ms, color 200ms;
div#index_artist div.item
text-align: left;
cursor: pointer;
div#index_artist div.item:hover
color: green;
padding: 16px 20px 16px 16px;
div#container
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 128px 0 0 64px;
display: block;
margin: 0;
transition: padding 200ms;
div.row
position: relative;
width: 100%;
height: 316px;
box-sizing: border-box;
padding: 0;
margin: 0;
display: flex;
overflow: hidden;
section
position: absolute;
left: 224px;
right: 0px;
height: 316px;
background: white;
box-sizing: border-box;
display: flex;
overflow: scroll;
overflow-y: hidden;
padding: 0;
margin: 0;
background: #f5f5f5;
div.artist
position: relative;
height: 316px;
width: 224px;
box-sizing: border-box;
border-right: 1px solid #ececec;
border-left: none;
border-bottom: 1px solid #ececec;
padding: 16px;
margin: 0;
display: block;
background: white;
div.about
position: absolute;
box-sizing: border-box;
float: left;
padding: 6px 0 0 0;
margin: 196px 0 0 0;
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 12px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
color: Silver;
width: 100%;
height: 32px;
overflow: hidden;
p.info
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
position: absolute;
top: 48px;
border-top: 1px solid #ececec;
left: 0;
width: 224px;
height: 267px;
box-sizing: border-box;
padding: 16px 16px 0 16px;
overflow: hidden;
p.info span
margin: 0;
padding: 0 0 10px 0;
width: 100%;
display: block;
position: relative;
p.info a:link,
p.info a:visited,
p.info a:active
color: Silver;
text-decoration: none;
p.info a:hover
color: RoyalBlue;
text-decoration: none;
div.year
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0;
margin: 0;
background: white;
border-right: 1px solid #ececec;
display: table-row;
div.empty
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0 500px;
margin: 0;
background: #f5f5f5;
border-right: none;
display: table-row;
div.year>div:first-of-type
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 16px;
margin: 0;
display: table-cell;
height: 252px;
div.artwork
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 0;
margin: 0;
display: table-cell;
height: 252px;
div.artwork img
position: relative;
box-sizing: border-box;
float: left;
padding: 0;
margin: 0;
display: inline-block;
height: 196px;
div.year p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
width: 100%;
height: 49px;
padding: 16px;
text-align: left;
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
color: Tomato;
div.artist p
color: Green;
div.artist p.info
color: Silver;
text-transform: none;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
font-variant-ligatures: none;
padding: 0;
margin: 0;
/*
div#time
position: absolute;
background: blue;
padding:0;
margin:48px 0 0 0;
overflow-y: scroll;
overflow-x: hidden;
div.year
position: relative;
float: left;
background: silver;
padding:0;
margin:0;
div.artist
position: relative;
float: left;
background: green;
padding:0 16px 16px 0;
margin:0;
article
margin: 0;
padding: 0;
background-color: orange;
display: inline-block;
box-sizing: border-box;
vertical-align: bottom;
white-space:nowrap;
img
padding: 0;
margin: 0;
display: block;
height: 100px;
img:hover
z-index: 3;
height: 300px;
figure
padding: 0;
margin: 16px 0 0 16px;
display: table;
position: relative;
float: left;
figure img
padding: 0;
margin: 0;
display: block;
figcaption
display: table-caption;
caption-side: bottom;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
padding: 0;
margin: 0;
p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
margin: 0;
padding: 0 0 8px 0;
h1, h2
padding:16px 0 0 16px;
*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<p>Paintings.Directory<span id="note">about</span></p>
</header>
<div id="index_name">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="index_year">
<div>1900</div>
<div>1899</div>
<div id="anno_1777">1777</div>
<div>1897</div>
<div>1896</div>
<div>1895</div>
<div>1894</div>
<div>1893</div>
<div>1892</div>
<div>1891</div>
<div>1890</div>
<div>1889</div>
<div>1888</div>
<div>1887</div>
<div>1886</div>
<div>1885</div>
<div>1884</div>
<div>1883</div>
<div>1882</div>
<div>1881</div>
<div>1880</div>
<div>1879</div>
<div>1878</div>
<div>1877</div>
<div>1876</div>
<div>1875</div>
<div>1874</div>
<div>1873</div>
<div>1872</div>
<div>1871</div>
<div>1870</div>
<div>1869</div>
<div>1868</div>
<div>1867</div>
<div>1866</div>
<div>1865</div>
<div>1864</div>
<div>1863</div>
<div>1862</div>
<div>1861</div>
<div>1860</div>
<div>1859</div>
<div>1858</div>
<div>1857</div>
<div>1856</div>
<div>1855</div>
<div>1854</div>
<div>1853</div>
<div>1852</div>
<div>1851</div>
<div>1850</div>
<div>1849</div>
<div>1848</div>
<div>1847</div>
<div>1846</div>
<div>1845</div>
<div>1844</div>
<div>1843</div>
<div>1842</div>
<div>1841</div>
<div>1840</div>
</div>
<div id="index_artist">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div class="item">Gainsborough, Thomas</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div class="item">Manet, Edouard</div>
<div class="item">Miró, Joan</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="container">
<div class="row">
<div class="artist">
<p>Gainsborough, Thomas</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>14 May 1727 — 02 Aug 1788</span>
<a href="https://en.wikipedia.org/wiki/Thomas_Gainsborough">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1745</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1745/clayton-jones.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Clayton Jones</div>
</div>
</div>
<div class="year">
<p>1748</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/artist-with-wife-and-daughter.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Artist With Wife And Daughter</div>
</div>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/cornard-wood-near-sudburry-suffolk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Cornard Wood, near Sudburry, Suffolk</div>
</div>
</div>
<div class="year">
<p>1750</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1750/mr-and-mrs-andrews.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Mr and Mrs Andrews</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1779</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1779/the-blue-boy.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Blue Boy</div>
</div>
</div>
<div class="year">
<p>1785</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1785/the-morning-walk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Morning Walk</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Manet, Édouard</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>03 Jan 1832 — 30 Apr 1883</span>
<a href="https://en.wikipedia.org/wiki/Édouard_Manet">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1863</p>
<div class="artwork">
<a href="artist/manet-eduoard/1863/olympia.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Olympia</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1863/the-luncheon-on-the-grass.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Luncheon on the Grass</div>
</div>
</div>
<div class="year">
<p>1864</p>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-with-carp.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Carp</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-fruits-on-a-table.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life: Fruits on a Table</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/branch-of-white-peonies-and-secateurs.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Branch of White Peonies and Secateurs</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1865</p>
<div class="artwork">
<a href="artist/manet-eduoard/1865/woman-at-the-races.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Woman at the Races</div>
</div>
</div>
<div class="year">
<p>1874</p>
<div class="artwork">
<a href="artist/manet-eduoard/1874/the-monet-family-in-their-garden-at-argenteuil.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Monet Family in Their Garden at Argenteuil</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Miró, Joan</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>20 Apr 1893 — 25 Dec 1983</span>
<a href="https://en.wikipedia.org/wiki/Joan_Miró">© Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
</div>var $sections = $('section');
$('#anno_1777').on('click', function(e)
$sections.each(function()
let $section = $(this);
let $target = $('.anno_1777', $section);
if ($target.length)
$section.animate(
scrollLeft: $section.scrollLeft() + $target.position().left
, 500);
);
);html,
body
margin: 0;
padding: 0;
/* F O N T */
@font-face
font-family: Cinetype;
src: url(/assets/fonts/GT-Cinetype-Mono.ttf);
@font-face
font-family: America;
src: url(/assets/fonts/GT-America-Mono-Regular.ttf);
/* S E L E C T*/
img
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
::selection,
::-moz-selection
background: WhiteSmoke;
/* S C R O L L B A R */
::-webkit-scrollbar
box-sizing: border-box;
width: 16px;
border: none;
::-webkit-scrollbar-track
box-sizing: border-box;
border-top: none;
border-right: 1px solid #ececec;
border-bottom: none;
border-left: 1px solid #ececec;
background: #f5f5f5;
::-webkit-scrollbar-thumb
box-sizing: border-box;
height: 100px;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
border-top: none;
border-bottom: none;
background: white;
::-webkit-scrollbar-track:horizontal
box-sizing: border-box;
border-top: 1px solid #ececec;
border-right: none;
border-bottom: 1px solid #ececec;
border-left: none;
background: #f5f5f5;
::-webkit-scrollbar-thumb:horizontal
border-left: none;
border-right: none;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
width: 100px;
::-webkit-scrollbar-thumb:window-inactive
background: white;
header
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 16px;
background: white;
z-index: 3;
height: 48px;
border-bottom: 1px solid #ececec;
color: royalblue;
text-transform: lowercase;
header span#note
position: relative;
float: right;
color: silver;
div#index_name,
div#index_year
position: fixed;
float: left;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
z-index: 3;
color: royalblue;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: nowrap;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
div#index_name
top: 48px;
height: 32px;
border-bottom: 1px solid #ececec;
div#index_year
top: 80px;
height: 48px;
display: flex;
/* displays flex-items (children) inline */
overflow: scroll;
overflow-y: hidden;
border-bottom: none;
div#index_name div,
div#index_year div
box-sizing: border-box;
margin: auto;
align-self: stretch;
flex-grow: 1;
text-align: center;
height: 100%;
padding: 8px 0 0 0;
vertical-align: middle;
cursor: pointer;
border-left: 1px solid #ececec;
color: Silver;
background: white;
div#index_year div
padding: 8px 16px;
display: table-row;
div#index_name div:hover
color: green;
background: #f5f5f5;
div#index_year div:hover
color: tomato;
background: #f5f5f5;
div#index_name>div:first-of-type,
div#index_year>div:first-of-type
border-left: none;
#anno_1777
color: pink !important;
div#index_artist
position: fixed;
left: 0;
margin-left: -176px;
width: 240px;
top: 128px;
bottom: 0;
box-sizing: border-box;
padding: 0;
z-index: 2;
overflow: scroll;
overflow-x: hidden;
transition: margin 200ms;
div#index_artist:hover
margin-left: 0;
div#index_artist:hover~div#container
padding-left: 240px;
div#index_artist div,
div#index_artist div.item
position: relative;
float: left;
width: 100%;
color: silver;
padding: 8px 20px 8px 16px;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
background: white;
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
cursor: default;
text-align: right;
transition: padding 200ms, color 200ms;
div#index_artist div.item
text-align: left;
cursor: pointer;
div#index_artist div.item:hover
color: green;
padding: 16px 20px 16px 16px;
div#container
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
padding: 128px 0 0 64px;
display: block;
margin: 0;
transition: padding 200ms;
div.row
position: relative;
width: 100%;
height: 316px;
box-sizing: border-box;
padding: 0;
margin: 0;
display: flex;
overflow: hidden;
section
position: absolute;
left: 224px;
right: 0px;
height: 316px;
background: white;
box-sizing: border-box;
display: flex;
overflow: scroll;
overflow-y: hidden;
padding: 0;
margin: 0;
background: #f5f5f5;
div.artist
position: relative;
height: 316px;
width: 224px;
box-sizing: border-box;
border-right: 1px solid #ececec;
border-left: none;
border-bottom: 1px solid #ececec;
padding: 16px;
margin: 0;
display: block;
background: white;
div.about
position: absolute;
box-sizing: border-box;
float: left;
padding: 6px 0 0 0;
margin: 196px 0 0 0;
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 12px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
color: Silver;
width: 100%;
height: 32px;
overflow: hidden;
p.info
font-family: Cinetype, 'Courier New', monospace;
font-size: 10px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
position: absolute;
top: 48px;
border-top: 1px solid #ececec;
left: 0;
width: 224px;
height: 267px;
box-sizing: border-box;
padding: 16px 16px 0 16px;
overflow: hidden;
p.info span
margin: 0;
padding: 0 0 10px 0;
width: 100%;
display: block;
position: relative;
p.info a:link,
p.info a:visited,
p.info a:active
color: Silver;
text-decoration: none;
p.info a:hover
color: RoyalBlue;
text-decoration: none;
div.year
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0;
margin: 0;
background: white;
border-right: 1px solid #ececec;
display: table-row;
div.empty
position: relative;
height: 301px;
box-sizing: border-box;
padding: 0 500px;
margin: 0;
background: #f5f5f5;
border-right: none;
display: table-row;
div.year>div:first-of-type
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 16px;
margin: 0;
display: table-cell;
height: 252px;
div.artwork
position: relative;
box-sizing: border-box;
padding: 16px 16px 0 0;
margin: 0;
display: table-cell;
height: 252px;
div.artwork img
position: relative;
box-sizing: border-box;
float: left;
padding: 0;
margin: 0;
display: inline-block;
height: 196px;
div.year p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
width: 100%;
height: 49px;
padding: 16px;
text-align: left;
display: block;
box-sizing: border-box;
border-bottom: 1px solid #ececec;
color: Tomato;
div.artist p
color: Green;
div.artist p.info
color: Silver;
text-transform: none;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
font-variant-ligatures: none;
padding: 0;
margin: 0;
/*
div#time
position: absolute;
background: blue;
padding:0;
margin:48px 0 0 0;
overflow-y: scroll;
overflow-x: hidden;
div.year
position: relative;
float: left;
background: silver;
padding:0;
margin:0;
div.artist
position: relative;
float: left;
background: green;
padding:0 16px 16px 0;
margin:0;
article
margin: 0;
padding: 0;
background-color: orange;
display: inline-block;
box-sizing: border-box;
vertical-align: bottom;
white-space:nowrap;
img
padding: 0;
margin: 0;
display: block;
height: 100px;
img:hover
z-index: 3;
height: 300px;
figure
padding: 0;
margin: 16px 0 0 16px;
display: table;
position: relative;
float: left;
figure img
padding: 0;
margin: 0;
display: block;
figcaption
display: table-caption;
caption-side: bottom;
p
font-family: Cinetype, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
padding: 0;
margin: 0;
p
font-family: America, 'Courier New', monospace;
font-size: 12px;
line-height: 16px;
font-weight: normal;
text-transform: capitalize;
font-variant-ligatures: none;
margin: 0;
padding: 0 0 8px 0;
h1, h2
padding:16px 0 0 16px;
*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<p>Paintings.Directory<span id="note">about</span></p>
</header>
<div id="index_name">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="index_year">
<div>1900</div>
<div>1899</div>
<div id="anno_1777">1777</div>
<div>1897</div>
<div>1896</div>
<div>1895</div>
<div>1894</div>
<div>1893</div>
<div>1892</div>
<div>1891</div>
<div>1890</div>
<div>1889</div>
<div>1888</div>
<div>1887</div>
<div>1886</div>
<div>1885</div>
<div>1884</div>
<div>1883</div>
<div>1882</div>
<div>1881</div>
<div>1880</div>
<div>1879</div>
<div>1878</div>
<div>1877</div>
<div>1876</div>
<div>1875</div>
<div>1874</div>
<div>1873</div>
<div>1872</div>
<div>1871</div>
<div>1870</div>
<div>1869</div>
<div>1868</div>
<div>1867</div>
<div>1866</div>
<div>1865</div>
<div>1864</div>
<div>1863</div>
<div>1862</div>
<div>1861</div>
<div>1860</div>
<div>1859</div>
<div>1858</div>
<div>1857</div>
<div>1856</div>
<div>1855</div>
<div>1854</div>
<div>1853</div>
<div>1852</div>
<div>1851</div>
<div>1850</div>
<div>1849</div>
<div>1848</div>
<div>1847</div>
<div>1846</div>
<div>1845</div>
<div>1844</div>
<div>1843</div>
<div>1842</div>
<div>1841</div>
<div>1840</div>
</div>
<div id="index_artist">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
<div class="item">Gainsborough, Thomas</div>
<div>H</div>
<div>I</div>
<div>J</div>
<div>K</div>
<div>L</div>
<div>M</div>
<div class="item">Manet, Edouard</div>
<div class="item">Miró, Joan</div>
<div>N</div>
<div>O</div>
<div>P</div>
<div>Q</div>
<div>R</div>
<div>S</div>
<div>T</div>
<div>U</div>
<div>V</div>
<div>W</div>
<div>X</div>
<div>Y</div>
<div>Z</div>
</div>
<div id="container">
<div class="row">
<div class="artist">
<p>Gainsborough, Thomas</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>14 May 1727 — 02 Aug 1788</span>
<a href="https://en.wikipedia.org/wiki/Thomas_Gainsborough">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1745</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1745/clayton-jones.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Clayton Jones</div>
</div>
</div>
<div class="year">
<p>1748</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/artist-with-wife-and-daughter.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Artist With Wife And Daughter</div>
</div>
<div class="artwork">
<a href="artist/gainsborough-thomas/1748/cornard-wood-near-sudburry-suffolk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Cornard Wood, near Sudburry, Suffolk</div>
</div>
</div>
<div class="year">
<p>1750</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1750/mr-and-mrs-andrews.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Mr and Mrs Andrews</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1779</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1779/the-blue-boy.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Blue Boy</div>
</div>
</div>
<div class="year">
<p>1785</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1785/the-morning-walk.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Morning Walk</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Manet, Édouard</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>03 Jan 1832 — 30 Apr 1883</span>
<a href="https://en.wikipedia.org/wiki/Édouard_Manet">⟶ Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1863</p>
<div class="artwork">
<a href="artist/manet-eduoard/1863/olympia.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Olympia</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1863/the-luncheon-on-the-grass.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Luncheon on the Grass</div>
</div>
</div>
<div class="year">
<p>1864</p>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-with-carp.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Carp</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/still-life-fruits-on-a-table.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life: Fruits on a Table</div>
</div>
<div class="artwork">
<a href="artist/manet-eduoard/1864/branch-of-white-peonies-and-secateurs.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Branch of White Peonies and Secateurs</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1865</p>
<div class="artwork">
<a href="artist/manet-eduoard/1865/woman-at-the-races.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Woman at the Races</div>
</div>
</div>
<div class="year">
<p>1874</p>
<div class="artwork">
<a href="artist/manet-eduoard/1874/the-monet-family-in-their-garden-at-argenteuil.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Monet Family in Their Garden at Argenteuil</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
<div class="row">
<div class="artist">
<p>Miró, Joan</p>
<p class="info">
<img class="portrait" src="http://lorempixel.com/196/196/">
<span>20 Apr 1893 — 25 Dec 1983</span>
<a href="https://en.wikipedia.org/wiki/Joan_Miró">© Wikipedia</a>
</p>
</div>
<section>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1777</p>
<div class="artwork">
<a href="artist/gainsborough-thomas/1777/the-watering-place.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">The Watering Place</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="year anno_1777">
<p>1937</p>
<div class="artwork">
<a href="artist/miro-joan/1937/still-life-with-old-shoe.jpg">
<img src="http://lorempixel.com/196/196/"></a>
<div class="about">Still Life With Old Shoe</div>
</div>
</div>
<div class="empty">
</div>
</section>
</div>
</div>answered Mar 25 at 23:10
showdevshowdev
21.6k14 gold badges36 silver badges55 bronze badges
edited Mar 26 at 1:34
answered Mar 25 at 23:10
showdevshowdev
21.6k14 gold badges36 silver badges55 bronze badges
answered Mar 25 at 23:10
showdevshowdev
21.6k14 gold badges36 silver badges55 bronze badges
answered Mar 25 at 23:10
showdevshowdev
21.6k14 gold badges36 silver badges55 bronze badges
21.6k14 gold badges36 silver badges55 bronze badges
Thanks @showdev, highly appreciated! How would I best approach to alter the code in such a way so it also works after a user has been 'scrolling around' in one or more of the parent divs? Do I for example first reset them all and then execute it again?
– Jordy
Mar 25 at 23:56
Since theposition()of an element will vary depending on the scroll position of its offset parent, I recommend including the<section>element's scroll position in thescrollLeftcalculation. I've edited my answer accordingly.
– showdev
Mar 26 at 0:05
I am repeating the code you wrote for every 'year' button. This means that the bit of code appears hundreds of times soon. How do I best prevent this repetitive appearance of script? Do I target all child divs with a class similar to the ID of the year button clicked (for example 'anno_1777')?
– Jordy
Mar 26 at 1:13
I'd grab the year value from the clicked element and use that to build your class selector. I added an example to my answer.
– showdev
Mar 26 at 1:35
how would I best add a class to the sections that do not contain the year value I click on? e.g. clicking on 1777 calls all 1777 paintings, however adds a class to the sections without paintings from 1777.... (so I can then use that class to slightly fade these sections out). Not a clue when to fade these back in... that's for me to figure out later -_-" Thousand times thanks!
– Jordy
Mar 27 at 13:57
|
show 6 more comments
Thanks @showdev, highly appreciated! How would I best approach to alter the code in such a way so it also works after a user has been 'scrolling around' in one or more of the parent divs? Do I for example first reset them all and then execute it again?
– Jordy
Mar 25 at 23:56
Since theposition()of an element will vary depending on the scroll position of its offset parent, I recommend including the<section>element's scroll position in thescrollLeftcalculation. I've edited my answer accordingly.
– showdev
Mar 26 at 0:05
I am repeating the code you wrote for every 'year' button. This means that the bit of code appears hundreds of times soon. How do I best prevent this repetitive appearance of script? Do I target all child divs with a class similar to the ID of the year button clicked (for example 'anno_1777')?
– Jordy
Mar 26 at 1:13
I'd grab the year value from the clicked element and use that to build your class selector. I added an example to my answer.
– showdev
Mar 26 at 1:35
how would I best add a class to the sections that do not contain the year value I click on? e.g. clicking on 1777 calls all 1777 paintings, however adds a class to the sections without paintings from 1777.... (so I can then use that class to slightly fade these sections out). Not a clue when to fade these back in... that's for me to figure out later -_-" Thousand times thanks!
– Jordy
Mar 27 at 13:57
Thanks @showdev, highly appreciated! How would I best approach to alter the code in such a way so it also works after a user has been 'scrolling around' in one or more of the parent divs? Do I for example first reset them all and then execute it again?
– Jordy
Mar 25 at 23:56
Thanks @showdev, highly appreciated! How would I best approach to alter the code in such a way so it also works after a user has been 'scrolling around' in one or more of the parent divs? Do I for example first reset them all and then execute it again?
– Jordy
Mar 25 at 23:56
Since the
position() of an element will vary depending on the scroll position of its offset parent, I recommend including the <section> element's scroll position in the scrollLeft calculation. I've edited my answer accordingly.– showdev
Mar 26 at 0:05
Since the
position() of an element will vary depending on the scroll position of its offset parent, I recommend including the <section> element's scroll position in the scrollLeft calculation. I've edited my answer accordingly.– showdev
Mar 26 at 0:05
I am repeating the code you wrote for every 'year' button. This means that the bit of code appears hundreds of times soon. How do I best prevent this repetitive appearance of script? Do I target all child divs with a class similar to the ID of the year button clicked (for example 'anno_1777')?
– Jordy
Mar 26 at 1:13
I am repeating the code you wrote for every 'year' button. This means that the bit of code appears hundreds of times soon. How do I best prevent this repetitive appearance of script? Do I target all child divs with a class similar to the ID of the year button clicked (for example 'anno_1777')?
– Jordy
Mar 26 at 1:13
I'd grab the year value from the clicked element and use that to build your class selector. I added an example to my answer.
– showdev
Mar 26 at 1:35
I'd grab the year value from the clicked element and use that to build your class selector. I added an example to my answer.
– showdev
Mar 26 at 1:35
how would I best add a class to the sections that do not contain the year value I click on? e.g. clicking on 1777 calls all 1777 paintings, however adds a class to the sections without paintings from 1777.... (so I can then use that class to slightly fade these sections out). Not a clue when to fade these back in... that's for me to figure out later -_-" Thousand times thanks!
– Jordy
Mar 27 at 13:57
how would I best add a class to the sections that do not contain the year value I click on? e.g. clicking on 1777 calls all 1777 paintings, however adds a class to the sections without paintings from 1777.... (so I can then use that class to slightly fade these sections out). Not a clue when to fade these back in... that's for me to figure out later -_-" Thousand times thanks!
– Jordy
Mar 27 at 13:57
|
show 6 more comments
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55347349%2fhow-to-simultaneously-align-child-divs-in-multiple-parent-divs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
