bonjour a tous, je me tourne vers la solidarité d'alsa pour réaliser un projet. je souhaite réaiser un module de reservation dans lequel il faut donc choisir la date et l'heure. pour la date aucun probleme, le datepicker avec jquery ui m'a fait ses preuves. mais il reste un élément que je trouve encore trop abandonné, le Time picker. autrement dit, la selection de l'heure de facon agreable. sur beaucoup de site ou je me promène on retrouve des listes html select>option qui ne sont plus vraiment agréable pour l'utilisateur.
je souhaiterais donc réaliser un Time Picker et j'ai trouvé un model sympa :
http://www.europcar.com/DotcarClient/step1promo.action?promoId=49703c645756795d644e76024133625c
cependant je n'arrive pas à le recréer.
j'ai une partie html qui est la suivante actuellement :
et voici mon css :
et le petit fichier js qui permet defaire apparaitre la div
et partir de la me voila bloqué je ne sais plus par ou commencer. j'ai bien la struc html et css maisj e ne sais pas comment réaliser un défilement de mes block li et savoir sur le quel je suis selectionné.
apres m'etre renseigné je crois avec vu qu'une méthode qui pourrait fonctionner serait de décaller cha li de sa position top 'en absolute' ainsi +30px ou -30px si on monte ou descend et donc de savoir que l'élément "selectionné" aura toujour le top =20px par exemple maisj e n'arrive pas à mettre cela en place. comment faire changer la valeur de mon top de chaque li descendant de id="liste-heure" (a savoir que cette nouvelle valeur est une partie de l'ancienne + ou - 30px et ce a chaque click sur un span ???
et comment savoir quel est la valeur de span qui aurait pour top: 30px par exemple ??
merci par avance pour votre aide et jereste disponible pour faire avancer ce blockage
je souhaiterais donc réaliser un Time Picker et j'ai trouvé un model sympa :
http://www.europcar.com/DotcarClient/step1promo.action?promoId=49703c645756795d644e76024133625c
cependant je n'arrive pas à le recréer.
j'ai une partie html qui est la suivante actuellement :
<!DOCTYPE html>
<html><head>
<meta charset="utf-8"/>
<title>page accueil</title>
<link rel="stylesheet" href="style.css" />
<script language="Javascript" type="text/javascript" src="affiche-cache.js"/>
<script language="Javascript" type="text/javascript" src="jquery.js"/>
<script language="Javascript" type="text/javascript">
</script>
</head>
<body>
<div id="box31-1" class="box31 box31-1">
<form class="positionnement">
<input type="text" name="checkhour" placeholder="10:00" class="case-contour" onclick="javascript:afficher_cacher('bloc-pick-hour1');"/>
<div class="bloc-pick-hour" id="bloc-pick-hour1">
<a class="closed" onclick="javascript:afficher_cacher('bloc-pick-hour1');"> X</a>
<h4 class="titre-blok"></h4>
<ul class="block-hour">
<li id="hour" class="colonne">
<span class="btn-up"></span>
<ul class="liste-heure hour" id="liste-heure">
<li >0</li>
<li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
<li >5</li>
<li >6</li>
<li >7</li>
<li >8</li>
<li >9</li>
<li >10</li>
<li >11</li>
<li >12</li>
<li >13</li>
<li >14</li>
<li >15</li>
<li >16</li>
<li >17</li>
<li >18</li>
<li >19</li>
<li >20</li>
<li >21</li>
<li >22</li>
<li >23</li>
</ul>
<span class="btn-down" ></span>
</li >
<li id="minute" class="colonne">
<span class="btn-up"></span>
<ul class="liste-cart-min hour">
<li style="top:0px;">00</li>
<li style="top:30px;">15</li>
<li style="top:60px;">30</li>
<li style="top:90px;">45</li>
</ul>
<span class="btn-down"></span>
</li>
</ul>
</div>
</form>
</div></body></html>et voici mon css :
@charset "utf-8";
/* CSS Document */
body, div, dl, dt, dd, ul, ol, li,pre, form, fieldset, input, textarea, blockquote, th, td { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th, td { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; margin: 0; padding: 0; }
body {
background-image: url(/test1.jpg);
background-size:cover;
}
#box31-1 {
position:relative;
width:95%; max-width:960px; height:800px; margin:40px auto;
background-color:rgba(255, 255, 255, 0.79);
box-shadow:10px 10px 1px rgba(46, 46, 46, 0.92);
border-radius:40px 0 15px 0;
border:1 solid rgba(255, 255, 255, 0.83);
background-color:rgba(36, 59, 190, 0.72);
}
#menu {
display:block; position:relative; top:8px; left:2%; width:99%; max-width:960px;
background-color:rgb(113, 190, 224); text-align:right; color:#121212; border:none;
}
li {
margin:0; padding:0; text-transform:uppercase; list-style:none;
}
.diapo{
display:block;
width:98%; height:100%;
max-height:350px;
margin: 20px 1%;
background-color:orange;
overflow:auto;
overflow-y:hidden;
}
.diapo:hover{
overflow-y:auto;
scrollbar:
}
.case-contour {
display:block; position:relative; background-color:white; width: 120px; height:40px; margin: 10px;
border-radius:5px;
text-align: center; color:black;
}
.bloc-pick-hour {
position:absolute; left:-10px; top: 45px;
width:280px; height: 180px;
border-radius:4px;
background-color:white;
padding:20px;
}
.positionnement {
display:block; position:relative; margin:50px; width:200px; height:500px;
}
.box31 {
border:1px solid transparent;
}
.closed {
position:absolute; right:20px; width:20px; height:20px;
}
#bloc-pick-hour-1 {
/*display:none;*/
}
.contour {
display:block; width:160px; height:50px;
}
.colonne {
background-color:red; width:90px; height:140px; padding:0; margin:0;
}
.titre-blok {
line-height:20px; display:inline-block;
}
.btn-up {
display:block; width:90px; height:25px;
background-color:blue;
margin:0 auto; padding:0;
}
.btn-down {
display:block; width:90px; height:25px;
background-color:blue;
margin:0 auto; padding:0;
}
.liste-heure {
height:90px; width:90px; overflow:hidden;
}
.liste-cart-min {
height:90px; overflow:hidden;
}
ul.hour li {
display:inline-block; line-height:30px; margin:0; width:90px; text-align:center; background-color:green;
}
.hour {
position:relative;
}
#bloc-pick-hour1 {
}
.block-hour > li {
display:inline-block; width:90px;
}et le petit fichier js qui permet defaire apparaitre la div
function afficher_cacher(id)
{
if(document.getElementById(id).style.display=="none")
{
document.getElementById(id).style.display="block";
}
else
{
document.getElementById(id).style.display="none";
}
}
et partir de la me voila bloqué je ne sais plus par ou commencer. j'ai bien la struc html et css maisj e ne sais pas comment réaliser un défilement de mes block li et savoir sur le quel je suis selectionné.
apres m'etre renseigné je crois avec vu qu'une méthode qui pourrait fonctionner serait de décaller cha li de sa position top 'en absolute' ainsi +30px ou -30px si on monte ou descend et donc de savoir que l'élément "selectionné" aura toujour le top =20px par exemple maisj e n'arrive pas à mettre cela en place. comment faire changer la valeur de mon top de chaque li descendant de id="liste-heure" (a savoir que cette nouvelle valeur est une partie de l'ancienne + ou - 30px et ce a chaque click sur un span ???
et comment savoir quel est la valeur de span qui aurait pour top: 30px par exemple ??
merci par avance pour votre aide et jereste disponible pour faire avancer ce blockage