I would like to create a slider diagram like this for my webpage to display results:
How can I do this provided I have a maximum and minimum and the value I would like to plot? Prefereably, I would like to create it on-the-fly as I generate the result page using html/javascript/php.
EDIT:
I can see that my question was confusing. I do not want to create a slider (like an input to a form form) but an output diagram that has a vertical line at a fixed value with a colour gradient background.
Thank you for any answers!
<html>
<style>
#slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #4CAF50;
cursor: pointer;
}
</style>
<body>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
</body>
</html>
here you have a slider, enjoy!
Since you want min-max value you need to create 2 range slider.
Check snippet
below.
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="range-slider">
<label>Min.</label>
<input class="range-slider__range" type="range" value="100" min="0" max="500">
<span class="range-slider__value">0</span>
</div>
<div class="range-slider">
<label>Max.</label>
<input class="range-slider__range" type="range" value="250" min="0" max="500" step="50">
<span class="range-slider__value">0</span>
</div>
And If you want save space you can create 1 range slider with 2 control slider.
Create a html for range slider then apply some jquery.
Please check snippet below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" media="screen">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="rangeslider">
<label for="price-min">Price:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">Price:</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
Then if you want to submit data to db you need to create form for this
Reference for range slider : https://www.w3schools.com/howto/howto_js_rangeslider.asp
I hope this answer can help.
At last, I've got it. Just HTML and CSS (and PHP if I want to be able to dynamically assign the vertical line by using style="left:x%")
.grad {
background: linear-gradient(to right, rgba(185, 74, 72, 0.75), rgba(192, 152, 83,0.25), rgba(70, 136, 71,0.75));
width: 100px;
height: 15px;
border-radius: 24px;
border-color: #446e9b;
border-width: 1px;
}
.vertical-line {
width: 1px;
height: 15px;
border-left: 2px solid #446e9b;
position: relative;
top: 0;
background: none;
}
.tick {
width: 1px;
height: 5px;
border-left: 1px solid #999999;
position: relative;
top: 0;
background: none;
}
.bottom-tick {
margin-top: -5px;
}
.top-tick{
margin-top: -5px;
}
.inner10{
z-index: 10;
}
.inner2{
z-index: 2;
left: 20%;
margin-top: -15px;
}
.inner3{
z-index: 3;
left: 40%;
}
.inner4{
z-index: 4;
left: 60%;
}
.inner5{
z-index: 5;
left: 80%;
}
.inner6{
z-index: 6;
left: 20%;
}
.inner7{
z-index: 7;
left: 40%;
}
.inner8{
z-index: 8;
left: 60%;
}
.inner9{
z-index: 9;
left: 80%;
}
<div class="grad">
<div class='vertical-line inner10' style="left:35%"></div>
<div class='tick inner6 bottom-tick'></div>
<div class='tick inner7 bottom-tick'></div>
<div class='tick inner8 bottom-tick'></div>
<div class='tick inner9 bottom-tick'></div>
<div class='tick inner2'></div>
<div class='tick inner3 top-tick'></div>
<div class='tick inner4 top-tick'></div>
<div class='tick inner5 top-tick'></div>
</div>
Related
I've a working app build in php/JQuery and bootstrap 3. I will convert this to bootstrap 4 and I've issues. In bootstrap 3 the dynamic images from the database were aligned 4 in a row. And if there were more than 4 images it created a new row. In bootstrap 4 the images are only shown in 1 column vertically.
Here is my coding:
getcustomer.php:
$i=$_REQUEST["id_ind"];
$sel="select * from customer_segment where industry_id='".$i."' LIMIT 12";
$qry=mysqli_query($conn, $sel);
while($row=mysqli_fetch_array($qry, MYSQLI_BOTH))
{
echo '
<h3><div class="col-12 col-lg-3 col-xl-3 customer_image count" style="position: relative;" id="'.$row[3].'">
<label class="container1">
<div class="customer-img" onclick="getdata_cont('.$row[0].')"><?php echo $row_ind["description"];>
<div class="img-fluid"> <img src="images/'.$row[3].'" class="picture"></div>
<div class="on-overlay" id="img-fluid" >
<span class="span1">'.$row[1].'</span>
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</div>
</div>
</div>
</label>
</div><h3>';
}
?>
index.php:
<!-- Step 2: Choose customer segment -->
<div class="row" id="customer_segment_hide">
<div class="col-md-12 col-8" style="text-align: center;margin-top: 50px;margin-bottom: 37px;">
<div class="div2 ">
<h2>2</h2>
</div>
<span class="span"><b>Choose Customer Segment </b></span>
<p class="p1">By clicking on a image below you go to the third step</p>
</div>
<div class="container">
<div class="col-md-12 addd">
<div class="pppp">
<p style="color: #FFF;font-size: 17px; text-align:center;margin-bottom:25px"><h4>How might we help?</h4></p>
</div>
</div>
</div><!-- Step 2: Close-->
</div>
<!-- JS: get customers segment -->
<script>
function getdata(id_ind)
{
$.ajax({
url:"getcustomer.php",
// ids= industry_id
data:{id_ind:id_ind},
type:'GET',
success: function(data){
$('.pppp').html(data);
}
});
}
</script>
style.css:
/* create blue square step 2 & 3 */
.addd{
background-color: #198bd1;
position:relative;
height: 430px;
margin-bottom: 132px;
}
/* create bigger blue square step 2 when there more then 8 images */
.addd2{
background-color: #198bd1;
position: relative;
height: 670px;
margin-bottom: 290px;
}
/* Step 2 plot images and defined width */
.pppp{
display: inline-block;
width: 100%;
padding: 30px 0;
}
/* image card size */
.customer-img{
width:75%;
margin:0 auto;
position:relative;
}
.customer-img img {
border-radius:20px;
width:100%;
z-index: 999;
height: 235px;
}
.on-overlay{
display:table;
position:absolute;
top:0;
left:0;
width:100%;
height:235px;
text-align:center;
background: rgba(0,0,0,0.3);
border-radius:20px;
padding-bottom: 123%;
}
.on-overlay span:not(.checkmark){
/*line-height: 9;
vertical-align:middle;
color:#fff;
display: table-cell;*/
position: absolute;
margin-left: -36%;
color: #fff;
text-align: center;
width: 76%;
top: 20%;
}
.checkmark {
position: absolute;
top: 74%;
left: 70%;
height: 25px;
width: 25px;
border-radius: 50%;
}
/* Title card */
.span1 {
display: inline-block;
font-size: 1.5rem;
text-align: center;
}
.choose
/* The container */
.container1 {
display: block;
position: relative;
/*padding-left: 35px;*/
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container1 input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* On mouse-over, add a grey background color */
.container1:hover input ~ .checkmark {
}
/* When the checkbox is checked, add a blue background */
.container1 input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container1 input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container1 .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.col-xl-3 {
width: 25%;
text-align: center;
}
.os-img-overlay {
position: absolute;
background: rgba(34,34,34,.3);
left: 37px;
top: 5px;
border-radius: 30px;
width: 71%;
height: 350px;
}
.close {
cursor: pointer;
position: absolute;
top: 7%;
padding: 12px 16px;
transform: translate(0%, -50%);
left: 0;
}
.os-img-title {
color: #f5f5f5;
font-family: 'Lato',sans-serif;
font-weight: bold;
font-size: 20px;
letter-spacing: 1px;
text-align: center;
width: 100%;
z-index: 2;
padding: 0 2px;
line-height: 20px;
max-width: 175px;
}
All the people use the normal dropdown like:
<form>
<select>
<option> bla bla </option>
</select>
</form>
Like that I can get the selected value trough PHP. But if I use divs I can't get the values from the multiple dropdowns.
function select_best_plan(sel, _this) {
$parent = $(_this).closest('.select-general');
$parent.find('button font').html($(_this).find('font').html());
$parent.find('.select-menu .select-menu-option').removeClass('active');
$(_this).addClass('active');
}
.select-general {
display: inline-block;
overflow: hidden;
border-radius: 12px;
vertical-align: middle;
position: relative;
text-transform: uppercase;
background: #182045;
color: #FFFFFF;
width: 170px;
min-width: 160px;
text-align: left;
font-size: 15px;
max-width: 100%;
}
.select-general .select-button {
text-align: right;
font-size: 13px;
height: 38px;
line-height: 38px;
padding: 0px 13px;
border-radius: 12px;
color: #FFFFFF;
width: 100%;
}
.select-general .select-button font {
text-align: left;
width: calc(100% - 20px);
height: 100%;
overflow: hidden;
max-width: 340px;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-general .select-menu {
padding: 0px;
overflow: hidden;
max-height: 0;
transition: max-height 0.15s ease-out, padding 0.15s ease-out;
}
.select-general .select-menu-option {
text-align: right;
font-size: 13px;
height: 38px;
line-height: 38px;
padding: 0px 13px;
color: #FFFFFF;
width: calc(100% - 26px);
cursor: pointer;
}
.select-general .select-menu-option font {
text-align: left;
}
.select-general .select-menu-option:hover {
background: #1A2A74;
}
.select-general .select-menu-option.active {
opacity: 0.5;
}
.select-general:hover .select-menu {
padding: 10px 0px;
max-height: 500px;
transition: max-height 0.15s ease-in, padding 0.15s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select-general" style="width: 250px;">
<button class="select-button">
<font class="float-left">Quantos Utilizadores Quer?</font><i class="icon small caret down"></i>
</button>
<div class="select-menu">
<div class="select-menu-option" data="1" onclick="select_best_plan(6, this)">
<font class="float-left">Apenas 1</font>
</div>
<div class="select-menu-option" data="3" onclick="select_best_plan(7, this)">
<font class="float-left">Até 3</font>
</div>
<div class="select-menu-option" data="5" onclick="select_best_plan(8, this)">
<font class="float-left">Até 5</font>
</div>
<div class="select-menu-option" data="10" onclick="select_best_plan(9, this)">
<font class="float-left">Até 10</font>
</div>
<div class="select-menu-option" data="15" onclick="select_best_plan(10, this)">
<font class="float-left">Até 15</font>
</div>
</div>
</div>
My idea is that the people select the first div "Apenas 1" and on submit I get that values on PHP.
I really can't find any tips that can help me or I'm just newbie on this..
Thanks.
Just add <input type="hidden" name="select" id="hidden-select" />
Change <div class="select-menu-option" data="5" to ... data-val="5"
and in: select_best_plan add
$('#hidden-select').val($(_this).data('val'))
There is lot of content available online explaining a lot of ways to implement this kind of a behavior.
One such link -
How to use FormData for ajax file upload
Set value of hidden field in a form using jQuery's ".val()" doesn't work
For more ways of implementation you can google with these key words -
Ajax calls
Submitting form with hidden input fields
How to build and submit Form using FormData. etc
Sorry for the first answer.
Well if you want to use customize select then use JavaScript to get the data. Normally only input tags select can be post or send automatically by form tag.
The submit button triggers a JavaScript function then get the value of the selected div then create a input tag containing the value of the div.
Ex:
<div class="select-general" style="width: 250px;">
<button class="select-button">
<font class="float-left">Quantos Utilizadores Quer?</font><i class="icon small caret down"></i>
</button>
<div class="select-menu">
<div class="select-menu-option" data="1" onclick="select_best_plan(6, this)">
<font class="float-left">Apenas 1</font>
</div>
function getselectedval(){
var data = $("div selected identifier here").attr("data");
$("container of passing input").append('<input name="name" val="'+ data +'" type="hidden">');
//submit the form
$("your form").submit();
}
This seems to be a cheat but hope this helps.
When I try to display content from another blade template, it will only show certain data on the webpage. What I want is inside this page, the content from test.blade.php together with the button, when click will pop up a form(I don't want the test.blade.php content to be inside). But whenever I try to do it, only certain information is shown and when I view page source, all the data has already been loaded. I have asked this question before already and someone told me it was the fault of my css, but I when I try to look at it, I don't really see anything which is causing this to happen. Can someone help me please? Thanks in advance!
I will put the screenshot here first in the question.
This is what it is suppose to look like where it will have a scroll down bar, and below there should be a button for the popup form.
But this is what I am getting (I have checked that all the data are already loaded)
elements.css (here is the css that I used)
#abc {
width: 100%;
height: 100%;
opacity: .95;
top: 0;
left: 0;
display: none;
position: fixed;
background-color: #313131;
overflow: auto;
}
img#close {
position: absolute;
right: -14px;
top: -14px;
cursor: pointer;
}
div#popupContact {
position: absolute;
left: 50%;
top: 17%;
margin-left: -202px;
font-family: 'Raleway', sans-serif;
}
form {
max-width: 300px;
min-width: 250px;
padding: 10px 50px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
background-color: #fff;
}
p {
margin-top: 30px;
}
h2 {
background-color: #FEFFED;
padding: 20px 35px;
margin: -10px -50px;
text-align: center;
border-radius: 10px 10px 0 0;
}
hr {
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
}
input[type=text] {
width: 82%;
padding: 10px;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
}
#name {
background-image: url(../images/name.jpg);
background-repeat: no-repeat;
background-position: 5px 7px;
}
#email {
background-image: url(../images/email.png);
background-repeat: no-repeat;
background-position: 5px 7px;
}
textarea {
background-image: url(../images/msg.png);
background-repeat: no-repeat;
background-position: 5px 7px;
width: 82%;
height: 95px;
padding: 10px;
resize: none;
margin-top: 30px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 16px;
font-family: raleway;
margin-bottom: 30px;
}
#submit {
text-decoration: none;
width: 100%;
text-align: center;
display: block;
background-color: #FFBC00;
color: #fff;
border: 1px solid #FFCB00;
padding: 10px 0;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
span {
color: red;
font-weight: 700;
}
button {
width: 10%;
height: 45px;
border-radius: 3px;
background-color: #cd853f;
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 18px;
cursor: pointer;
}
evaltest.blade.php
<html>
<head>
<title>Popup form </title>
<meta name="robots" content="noindex, nofollow">
<link href="{{ asset('css/elements.css') }}" rel="stylesheet">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-43981329-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<!-- body starts here -->
<body id ="bdy" style="overflow:hidden;">
<div id="abc">
<!-- Popup div starts here -->
<div id="popupContact">
<!-- contact us form -->
<form class="form-horizontal" method="post" action="{{ url('/evaltest/'.$data0->id) }}">
{{ csrf_field() }}
<img id ="close" src="{{ URL::to('/image') }}/3.png" onclick ="div_hide()">
<input type="hidden" name="user_id" value="{{$data0->id}}">
<div class="form-group">
<label class="col-md-2"><b>Recommendation:</b></label>
<div class="col-md-6">
<input type="radio" id ="recommendation" name="recommendation" value="Yes"> Yes<br>
<input type="radio" id ="recommendation" name="recommendation" value="No"> No<br>
</div>
</div>
<div class="form-group">
<div class="col-md-6-offset-2">
<input id= "submit" type="submit" href="javascript: check_empty()" class="btn btn-primary" value="Save">
</div>
</div>
</form>
</div>
<!-- Popup Div Ends Here -->
// #include('test')
//it will show all data if I were to put here but I don't want to put it together with the popup form
</div>
<!-- Display Popup Button -->
//this will show a few info but no button
#include('test')
<h1>Click Button to Evaluate</h1>
<button id="popup" onclick="div_show()">Popup</button>
<script src="{{ asset('/js/my_js.js') }}"></script>
//this will show even lesser info but button is shown
//#include('test')
</body>
</html>
test.blade.php (there are more information inside but I only put some as an example of how I got the information)
<div class="container">
#foreach ($data as $object)
<b>Name: </b>{{ $object->Name }}<br><br>
<b>Alias: </b>{{ $object->Alias }}<br><br>
<b>Email: </b>{{$object->Email}}<br><br>
#endforeach
</div>
I have tried removing some of the things inside the css but nothing happen, I even try removing those with the position: fixed and also added .container but it still doesn't work.
myjs.js
// function to display popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
// function to hide popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}
I have figured it out how to show my data is that I have to remove the style="overflow:hidden;" part so that it will work
I am trying to make a way that I can decide in what table the name and the hour goes, by selecting it from one or both checkboxes.
For example, if I have a new name and hour, I can choose whether it is going in the table of "standard" or "advanced" or both by selecting it through the checkboxes.
#myform .plus, .minus {
text-decoration: none;
color: #fff;
background-color: #fdd818;
text-align: center;
letter-spacing: .5px;
-webkit-transition: .2s ease-out;
transition: .2s ease-out;
cursor: pointer;
}
.collapsible-header{
color: #ffffff;
}
.row{
margin: 0;
width: 100%;
}
.uren{
display: -webkit-inline-box;
padding-left: 10px;
padding-right: 10px;
}
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #ffcc00;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
.btn:hover {
background: #dbaf00;
text-decoration: none;
}
/* Pop up */
.letspop{
background-color: #fff;
width: 120px;
display: block;
margin: 5% auto;
padding: 20px;
position: relative;
text-align: center;
float: right;
margin-right: 20px;
margin-top: 0px;
}
.letspop:hover{
cursor: pointer;
}
.overlay{
display: none; /* Default Hidden */
position: fixed;
left: 0;
top: 0;
z-index: 1;
background-color: rgba(0,0,0,0.6);
height: 100%;
width: 100%;
}
.popup{
display: none; /* Default Hidden */
position: fixed;
left: 50%;
top: 5%;
z-index: 2;
background-color: #fff;
height: 450px;
width: 300px;
overflow: hidden;
padding: 40px;
transform: translate(-50%, 0);
}
#new_module{
width: 195px;
}
h1, h2{
color: steelblue ;
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
line-height: 1;
}
h2{
color: dodgerblue ;
}
small{
color: #444 ;
font-size:0.4em;
display: block;
margin: 0.2rem auto 0;
}
.close{
position: absolute;
top: 8px;
right: 8px;
display: block;
color: #666666;
font-family: sans-serif;
}
.close:hover{
cursor: pointer;
color: #444444;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<form action="#" method="POST">
<div class="row">
<div class="input-field col s6">
<input id="new_module" type="text" class="validate">
<label class="active" for="new_module">Name</label>
</div>
</div>
<form action="#">
<p class="range-field">
<input type="range" id="test" min="0" max="20" />
</p>
</form>
<p>
<input type="checkbox" class="filled-in" id="standard"/>
<label for="standard">Standard</label>
</p>
<p>
<input type="checkbox" class="filled-in" id="advanced"/>
<label for="advanced">Advanced</label>
</p>
<hr>
<button class="btn waves-effect waves-light" type="submit" name="action">
<i class="material-icons right">send</i>
</button>
<div class="close">X</div>
</form>
You need to set name for html elements to submit to server.
try the following changes:
<form action="checkbox.php" method="post">
<p>
<input type="checkbox" class="filled-in" id="standard" name="chk[]" value="standard"/>
<label for="standard">Standard</label>
</p>
<p>
<input type="checkbox" class="filled-in" id="advanced" name="chk[]" value="advanced"/>
<label for="advanced">Advanced</label>
</p>
<input type="submit" />
</form>
and try the following php code to find selected checkbox
foreach($_POST['chk'] as $key => $chk){
if($chk == 'standard'){
// do some code
}
if($chk == 'advanced'){
// do some code
}
}
quick answer to begin to help you.
Do a "indatabase.php" where there is your SQL actions in. After, do something like :
<form action="/indatabase.php" method="POST">
See this :
https://stackoverflow.com/a/22836074/8695939
If you want a bit more security, use PHP PDO instead.
You can have sqli and PDO exemples here :
https://www.w3schools.com/php/php_mysql_insert.asp
I'm building a website with a CSS popup inside a loop that increments by 1, but the variable $i does not carry on the popup.
CSS
#cover {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 5;
width: 100%;
height: 100%;
display: none;
}
#score {
height: 380px;
min-width: 280px;
max-width: 380px;
margin: 0 auto;
position: relative;
z-index: 10;
display: none;
background: url(login.png) no-repeat;
border: 5px solid #cccccc;
border-radius: 10px;
}
#score:target,
#score:target + #cover {
display: block;
opacity: 2;
}
.cancel {
display: block;
position: absolute;
top: 3px;
right: 2px;
background: rgb(245, 245, 245);
color: black;
height: 30px;
width: 35px;
font-size: 30px;
text-decoration: none;
text-align: center;
font-weight: bold;
}
.popup {
position: fixed;
left: 50%;
top: 20%;
}
.popup .wrapper {
position: relative;
left: -50%;
}
PHP
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" >
</div>
</div>
</div>
The popup number $i never changes. It freezes on 1. I'm not sure what's the problem. I don't see any, but I can't make the popup number change.
In your codes you have repeated the score div with same id. it need to have different ids for different divs
(This will only create proper html. for popup effect it needs to use some java script/JQuery codes)
Try this
<?php $loopvalue = 3; $i=1; while ($i <= $loopvalue) {?>
<li>open popup <?php echo $i;?></li>
<div class="popup">
<div class="wrapper">
<div id="score<?php echo $i;?>" style="background-color:#FFF;">
popup # <?php echo $i;?>
×
</div>
<div id="cover" > </div>
</div>
</div>
<?php $i++;}?>