Scroll curseur avec le nombre de pixels

**zool.bzh** · 21/10/2024, 08h08

Bonjour à tous.
Je voudrais avoir un curseur avec le nombre de pixels comme suit -> oOo.
Avez-vous une piste ?

**NoSmoking** · 21/10/2024, 10h50

Bonjour,
pas grand chose à voir avec le CSS

Avez-vous une piste ?

La première des choses à faire et de regarder le code source, touches Ctrl + U, pour avoir une idée de comment cela fonctionne.

Dans le cas présent il s'agit d'une interaction HTML-JS.

Exemple tout simple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<p>
  <input type="range" name="range" value="50" oninput="this.nextElementSibling.textContent = this.value">
  <output>50</output>
</p>
<p>
  <input type="range" name="range" value="25" oninput="this.nextElementSibling.textContent = this.value">
  <output>25</output>
</p>

**zool.bzh** · 22/10/2024, 04h55

Ok merci
Une autre question.
Comment garder en mémoire le curseur lors du rafraichissement ?
l'exemple -> oOo
le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<?php
$pdo = new PDO('mysql:host=mon_ip;dbname=ma_base', 'id', '****');
?>
<!DOCTYPE html>
<head>
<title> .: zool.bzh :. Demo - Vision</title>
<link href="css/grid.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
 </head>
<body style="width: 980px" bgcolor=#FFFFFF>
  <a href="/"><img src="pics/header.jpg" height="147" width="980"></a>
<?php
$selected = isset( $_GET['dos'] ) ? $_GET['dos'] : "" ;
$selectedValue = 'selected="selected"';
?>
<div class="wrapper">
  <div class="one"><form method="GET" action="grid.php">
    <select name="dos" id="dos" size="1">
       <option value="Dossier1" <?php if( $selected == "Dossier1" ) echo $selectedValue;  ?>>Dossier1</option>
       <option value="Dossier2" <?php if( $selected == "Dossier2" ) echo $selectedValue; ?>>Dossier2</option>
       <option value="Dossier3" <?php if( $selected == "Dossier3" ) echo $selectedValue; ?>>Dossier3</option>
    </select>
  </div>
<?php
 
$dos = $_GET['dos'] ?? 'Dossier1';
 
    $sql_less = 'SELECT min(height), max(height), min(width), max(width), name_tof, dos_tof FROM pictures WHERE dos_tof = :dos_tof';
    $sth_less = $pdo->prepare($sql_less); 
    $sth_less->execute(array('dos_tof' => $dos));
                         
    $done_pics = $sth_less->fetchAll();
 
foreach ($done_pics as $pics_less) {
    $min_height_value = $pics_less['min(height)'];
    $max_height_value = $pics_less['max(height)'];
    $min_width_value = $pics_less['min(width)'];
    $max_width_value = $pics_less['max(width)'];
}
 
if (isset($_GET['heightmin']) && isset($_GET['heightmax']) && isset($_GET['widthmin']) && isset($_GET['widthmax'])) {
     $min_height_value = $_GET['heightmin']; 
     $max_height_value =  $_GET['heightmax'];
     $min_width_value = $_GET['widthmin'];
     $max_width_value = $_GET['widthmax'];
}
 
$sql_pics = 'SELECT height, width, dos_tof, name_tof FROM pictures WHERE dos_tof = :dos_tof AND height <= :sqlmaxheight AND height >= :sqlminheight  AND width <= :sqlmaxwidth AND width >= :sqlminwidth';
$sth_pics = $pdo->prepare($sql_pics);
$sth_pics->execute(array('dos_tof' => $dos,
                         'sqlmaxheight' => $max_height_value,
                         'sqlminheight' => $min_height_value,
                         'sqlmaxwidth' => $max_width_value,
                         'sqlminwidth' => $min_width_value
                                     ));
 
 
if (isset($_GET['reset'])) {
        foreach ($done_pics as $pics_less) {
        $min_height_value = $pics_less['min(height)'];
        $max_height_value = $pics_less['max(height)'];
        $min_width_value = $pics_less['min(width)'];
        $max_width_value = $pics_less['max(width)'];
    }
}
 
?>
     <div class="two">  
       longueur comprise entre  
       <input type="range" name="heightmin" value="<?php echo $min_height_value;?>" min="<?php echo $min_height_value ?>" max="<?php echo $max_height_value ?>" oninput="this.nextElementSibling.textContent = this.value"/>
       <output><?php echo $min_height_value; ?></output><br>
       et <br>
	   <input type="range" name="heightmax" value="<?php echo $max_height_value;?>" min="<?php echo $min_height_value ?>" max="<?php echo $max_height_value ?>" oninput="this.nextElementSibling.textContent = this.value"/>
       <output><?php echo $max_height_value; ?></output>
	   </div>
 
 
       <div class="tree"> 
	   largeur comprise entre  
         <input type="range" name="widthmin" value="<?php echo $min_width_value;?>" min="<?php echo $min_width_value; ?>" max="<?php echo $max_width_value ?>" oninput="this.nextElementSibling.textContent = this.value"/>
         <output><?php echo $min_width_value; ?></output><br>
         et <br>
	     <input type="range" name="widthmax"   value="<?php echo $max_width_value;?>" min="<?php echo $min_width_value ?>" max="<?php echo $max_width_value ?>" oninput="this.nextElementSibling.textContent = this.value"/>
         <output><?php echo  $max_width_value; ?></output>
        </div>
 
 
	   <div class="four">
         <input type="submit" name="val" value="Valider" />
         <input type="submit" name="reset" value="reset" />
         <br>
 
 
 
		<?php $nbr_line_pics = $sth_pics->rowCount();
          echo $nbr_line_pics." photos dans la base<br>"; 
                 ?>
	 </div>
	 <div class="five">  <?php
         $save_pics = $sth_pics -> fetchAll(); 
            foreach($save_pics as $pics) {
                echo $pics['name_tof']."<br>";
            }
?>
        </div>
    </body>
</html>

??

**NoSmoking** · 23/10/2024, 12h10

Une autre question.

On est quand même plus un soucis logique serveur que CSS

Comment garder en mémoire le curseur lors du rafraichissement ?

tu n'as qu'une chose à modifier entre les différents appels, c'est la valeur de tes <input type="range">.

Cela n'a pas de sens que de mettre la value égale au min, min et max seraient plutôt des constantes, éventuellement différentes suivant le dossier sélectionné.

Scroll curseur avec le nombre de pixels

Défilement en CSS

Discussions similaires

Partager

Partager