Cre­ate an in­ter­ac­tive multi-lay­ered pop-out se­lec­tor

Al­low con­tent items to be­come the fo­cus of at­ten­tion upon their se­lec­tion by the user

Web Designer - - Lightbox -

1. Ini­ti­ate the HTML doc­u­ment

The first step is to de­fine the struc­ture of the HTML doc­u­ment. This con­sists of the main HTML con­tainer, which stores a head and body sec­tion. While the head sec­tion’s main re­spon­si­bil­ity is to load the ex­ter­nal CSS and Javascript re­sources, the body sec­tion will be used to store the vis­i­ble con­tent cre­ated in step 2.

<!DOCTYPE html>

<html>

<head>

<ti­tle>pop Out Se­lect</ti­tle>

<link rel="stylesheet" type="text/css" href="styles.css" />

<script src="code.js"></script>

</head>

<body>

*** STEP 2 HERE

</body>

</html>

2. HTML con­tent

The HTML con­tent con­sists of a con­tainer for the se­lectable items – to be ref­er­enced by the 'data-pic­ture' at­tribute. Each child el­e­ment of this con­tainer will dis­play as an in­ter­ac­tive el­e­ment that will an­i­mate to be­come the fo­cus of at­ten­tion when clicked. You can place any type of HTML con­tent within th­ese el­e­ments.

<ar­ti­cle data-pic­ture>

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

</ar­ti­cle>

3. Javascript ini­ti­a­tion

Cre­ate a new file called 'code.js'. This step waits for the page to com­plete load­ing, then will search for all of the first level chil­dren of items inside chil­dren of con­tain­ers us­ing the 'data-pic­ture' at­tribute. Each of th­ese chil­dren will have a 'click' event lis­tener ap­plied to them – a func­tion that is ex­e­cuted when the item is clicked. win­dow.ad­de­ventlis­tener("load", func­tion() {

var nodes = doc­u­ment. query­s­e­lec­torall("[data-pic­ture] > *"); for(var i=0; i<nodes.length; i++){ nodes[i].ad­de­ventlis­tener("click", func­tion(){

*** STEP 4 HERE

}); } });

4. Event code

The code placed inside the event lis­tener func­tion searches for all the first level el­e­ments inside the par­ent 'data-pic­ture' con­tainer so that their 'data-sta­tus' at­tribute can be re­set to blank. Af­ter this re­set, the se­lected item’s 'data-sta­tus' at­tribute is re­versed be­tween blank or ac­tive de­pend­ing on its cur­rent value. var search = this.par­entn­ode. query­s­e­lec­torall("[data-pic­ture] > *"); for(var n=0; n<search.length; n++){

if(this != search[n])search[n]. se­tat­tribute("data-sta­tus",""); } if(this.getat­tribute("data-sta­tus") == "ac­tive"){

this.se­tat­tribute("data-sta­tus", "");

}else{

this.se­tat­tribute("data-sta­tus", "ac­tive"); }

5. Pic­ture styling

Cre­ate a new file called 'styles.css'. This step first de­fines con­tain­ers us­ing the 'data-pic­ture' at­tribute to cover the full size of the screen. Each of the first level chil­dren of con­tain­ers us­ing the 'data-pic­ture' at­tribute are set to dis­play with a de­fault size and back­ground colour. Ab­so­lute po­si­tion­ing and tran­si­tion rules are set to al­low unique po­si­tion­ing and animation ef­fects to oc­cur when se­lected.

[data-pic­ture]{ po­si­tion: rel­a­tive; width: 100vw; height: 100vh; }

[data-pic­ture] > *{ po­si­tion: ab­so­lute; dis­play: block; back­ground: rgba(255,0,0,.25); bor­der: 2px solid #000; width: 10vw; height: 20vw; tran­si­tion: width 1s, height 1s, z-in­dex

1s, top 1s, left 1s; }

6. Child styling

Each child within the 'data-pic­ture' con­tain­ers need a unique ver­ti­cal po­si­tion, hor­i­zon­tal po­si­tion and z-in­dex for depth. This ex­am­ple sets spe­cific po­si­tions for each child item based on their or­der within the HTML us­ing the 'nth-child' se­lec­tor. In this ex­am­ple, we ref­er­ence child items 1 to 5 us­ing this nth-child se­lec­tor. [data-pic­ture] > *:nth-child(1){ left: 20vw; top: 20vw; z-in­dex: 5; }

[data-pic­ture] > *:nth-child(2){ left: 25vw; top: 10vw; z-in­dex: 4; }

[data-pic­ture] > *:nth-child(3){ left: 30vw; top: 20vw; z-in­dex: 5; }

[data-pic­ture] > *:nth-child(4){ left: 35vw; top: 10vw; z-in­dex: 4; }

[data-pic­ture] > *:nth-child(5){ left: 40vw; top: 20vw; z-in­dex: 5; }

7. Ac­tive chil­dren

Any item that has been se­lected by the user will have had a 'data-sta­tus' at­tribute ap­plied that has been set to ac­tive by the Javascript ap­plied in steps 3 and 4. Ac­tive items are set to ap­pear at a big­ger size at a spe­cific lo­ca­tion that ap­pears above all other el­e­ments. Their changes will ap­pear an­i­mated due to the tran­si­tion de­fined in step 5.

[data-pic­ture] > *[data-sta­tus="ac­tive"]{ z-in­dex: 10; back­ground: red; width: 20vw; height: 40vw; top: 10vw; left: 20vw; }

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.