I've been making a slider in JS using JQuery to use as a time picker and trying to display it in my PHP script. I have been following these instructions and the first part worked perfectly fine. Now when I go to add the next stage, it does not show up anymore. Any ideas?
Link to instructions:
http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/
Here is my code:
<script>
$(function() {
$( '#slider-range' ).slider({
range: true,
min: 0,
max: 839,
values: [ 60, 210 ],
slide: slideTime
});
function slideTime(event, ui){
var val0 = $('#slider-range').slider('values', 0),
val1 = $('#slider-range').slider('values'', 1),
minutes0 = parseInt(val0 % 60, 10),
hours0 = parseInt(val0 / 60 % 24, 10),
minutes1 = parseInt(val1 % 60, 10),
hours1 = parseInt(val1 / 60 % 24, 10);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
$('#time').text(startTime + ' - ' + endTime);
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + "";
if (hours < 12) {
time = 'AM';
}
else {
time = 'PM';
}
if (hours == 0) {
hours = 12;
}
if (hours > 12) {
hours = hours - 12;
}
if (minutes.length == 1) {
minutes = '0' + minutes;
}
return hours + ':' + minutes + ' ' + time;
}
slideTime();
});
</script>
<script>
$(function() {
$( '#datepicker' ).datepicker({ dateFormat: 'yy-mm-dd' });
});
</script>
<?php
//settings
echo "<hr style='border: 1px solid #800000'><h3>Settings</h3>";
echo "<table style='width:100%;text-align:center;'>";
echo "<tr><td><h4>Date Selector</td><td><h4>Group Selector</td></tr>";
echo "<tr><td><input type='text' id='datepicker' name='date' value='Select a date...' onchange='this.form.submit()'></form></td>";
echo "</select></form></td></tr>";
echo "</table>";
if (isset($_GET['date'])) {
$date = $_GET['date'];
}
else {
$date = date("Y-m-d");
}
//boat booking
echo "<hr style='border: 1px solid #800000'><h3>Book Boats - ".$date."</h3>";
echo "<table style='width:100%;text-align:center;'>";
echo "<tr><td><h4>Time Selector<h4></td></tr>";
echo "</table>";
echo "<div class='slider' id='slider-range'></div>";
//logging
echo "<hr style='border: 1px solid #800000'><h3>Boat Usage</h3>";
Thanks in advance!
You should remove the extra quote ' in the following line :
val1 = $('#slider-range').slider('values'', 1);
Should be :
val1 = $('#slider-range').slider('values', 1);
And better if you can use change instead of slider to adjust the time.
$( '#slider-range' ).slider({
range: true,
min: 0,
max: 839,
values: [ 60, 210 ],
step: 30,
change: slideTime
});
function slideTime( event, ui){
var val0 = $('#slider-range').slider('values', 0),
val1 = $('#slider-range').slider('values', 1),
minutes0 = parseInt(val0 % 60, 10),
hours0 = parseInt(val0 / 60 % 24, 10),
minutes1 = parseInt(val1 % 60, 10),
hours1 = parseInt(val1 / 60 % 24, 10);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
$('#stime').text(startTime);
$('#etime').text(endTime);
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + "";
if (minutes.length == 1) {
minutes = '0' + minutes;
}
hours = hours +8;
return hours + ':' + minutes;
}
slideTime();
#slider-range{
width:300px;
margin-top:10px;
}
body {
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<h1>HTML Slider Test</h1>
<div id="slider-range"></div>
<div id="stime"></div>
<div id="etime"></div>
<p>Your slider has a value of <span id="slider-value"></span></p>
Hope this helps.
Related
I want to render a Countdown for a different time for different Products I use MVC EntityFrameWork and for client-side jQuery and JavaScript.
When You datatable's render section so you find a JavaScript SetInterval function to make it dynamic but it didn't work When I only use the JavaScript method SetTime (made by self)
The SetTimer Function gets the remaining time for products and I want This function to run again and again every second to make this dynamic
Is there any other way to perform this Action?
table = $('#ProductTable').DataTable({
"ajax": {
"url": "/api/product/",
"type": "GET",
"dataSrc": ""
},
"columns": [
{
"data": "id",
render: function (data, type, Product) {
debugger;
return "<div id='ProductCover'> <div id='Product-img-div'> <img src='/Content/Images/" + Product.images + "' width='200px'></div> <div style='margin-right: 50px;'> Product Name:<h5> " + Product.productName + " <h5> Product Descrption: <h5> " + Product.description + "</h5> </div> <div class='countdown'> End Time: <span class='clock'> " + **setInterval(SetTimer(Product.endBidDate),1000)** +" </span > </div > <br><div style='margin-left:50px;'> Current Highest Amount:<h5>" + Product.highestAmount + " </h5> </div> </div> <button type='button' class='btn btn-primary' onclick='BidModal(" + Product.id + ")'>new Bids </button> <button class='btn btn-primary' data-toggle='modal' data-target='#BuyerQuyerModal' data-whatever='#mdo' onclick='Select(" + Product.id + ")'>Ask Seller</button> </div> ";
}
}
]
})
}
This Script finds the remaining time with the End Date of the Product Sale and I call this function in HTML (datatable's render section) How can I call this with SetInterval so I can time goes in backward
function setTimer(endTimes) {
var endTime = endTimes;
timerrrr = endTime
endTime = (Date.parse(endTime) / 1000);
var now = new Date();
now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
return `${days} : ${hours} : ${minutes} : ${seconds}`;
}
I would place the setInterval function in the DataTable initComplete option, instead of in a column renderer:
initComplete: function () {
setInterval(function () {
doCountdowns();
}, 1000);
}
Here is a very basic runnable demo showing that aproach:
function doCountdowns() {
$( '.endtime' ).each(function( index ) {
doCountdown( this ); // a td node
});
}
function doCountdown( node ) {
let endTime = Date.parse( $( node ).html() ) / 1000;
let now = (Date.parse(new Date()) / 1000);
let timeLeft = endTime - now;
let days = Math.floor(timeLeft / 86400);
let hours = Math.floor((timeLeft - (days * 86400)) / 3600);
let minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60);
let seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
$( node ).next("td").html( `${days} : ${hours} : ${minutes} : ${seconds}` );
}
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
setInterval(function () {
doCountdowns();
}, 1000);
}
} );
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Product ID</th>
<th>End Bid Date</th>
<th>Time Remaining</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td class="endtime">2022-12-04 13:44:35</td>
<td></td>
</tr>
<tr>
<td>456</td>
<td class="endtime">2022-11-07 06:21:12</td>
<td></td>
</tr>
<tr>
<td>789</td>
<td class="endtime">2022-10-04 17:23:00</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You may need to adjust this to account for your specific data & formatting - and the fact that you are using an Ajax data source - but the approach should be the same.
As an enhancement: You may also need some logic to handle the data when the deadline is reached, otherwise you will get incorrect data displayed.
So if I have <ons-input style="padding-bottom: 15px;" type="date" id="expiration" required="required"></ons-input>, would it be possible to take the date entered and display the days left until that date is reached and count down each day? exp: if todays 2020-12-4 and I input a new date 2020-12-6, then you have 2 days left, then tomorrow it would display 1 day left.
HTML:
<template id="mylist.html">
<ons-page id='mylist'>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
My List
</div>
</ons-toolbar>
<div style="padding-top: 15px; text-align: center;">
<ons-input type="text" class="select-input--underbar" id="food" placeholder="Enter item here . . ."></ons-input>
<br></br>
<label for="expiration">Expiration Date:</label>
<ons-input style="padding-bottom: 15px;" type="text" id="expiration" placeholder = "YYYY-MM-DD" value = ""></ons-input>
<ons-button class="btnAdd" id="start-count" modifier="large" onclick="addItem()">Add Item</ons-button>
</div>
<ons-list id='foodList'>
<ons-list-header>Listed Items:</ons-list-header>
<div class="countdown-content">
<ons-list-item>
<span id="day"></span> Days
<span id="hour"></span> Hours
<span id="minute"></span> Minutes
<span id="second"></span> Seconds
</ons-list-item>
</div>
</ons-list>
</ons-page>
</template>
JavaScript:
function listItems(tx, rs)
{
var output = '';
var foodList = document.getElementById('foodList');
for(i = 0; i < rs.rows.length; i++)
{
var row = rs.rows.item(i);
output += "<ons-list-item>" + "Item: " + row.food + " " + "<br></br>" + "Expiration: " + row.expiration + "<br></br>" + "Days: " + day + "<br></br>" + "Hours: " + hour + "<br></br>" + "Minutes: " + minute + "<br></br>" + "Seconds: " + second +
"<div class=\"right\"> <ons-button onclick='deleteItems(" + row.ID + ");') ><ons-icon icon=\"trash\"></ons-icon></ons-button></div>" +
"</ons-list-item>";
}
foodList.innerHTML = output;
}
function addItem()
{
var foodText = document.getElementById("food");
var expText = document.getElementById("expiration");
var foodVal = foodText.value;
var expVal = expText.value;
db.transaction(function(tx)
{
tx.executeSql("INSERT INTO foodLogs (food, expiration) VALUES (?, ?)", [foodVal, expVal])
});
foodText.value = "";
expText.value = "";
fn.load("mylist.html");
}
function deleteItems(id)
{
db.transaction(function(tx)
{
tx.executeSql("DELETE FROM foodLogs WHERE ID=?", [id], gotSuccess, gotError);
});
}
var timer = null;
var end;
var toZero;
var btn = document.getElementById("btnAdd");
var oDay = document.getElementById("day");
var oHour = document.getElementById("hour");
var oMinute = document.getElementById("minute");
var oSecond = document.getElementById("second");
var endtime = document.getElementById("expiration");
var startBtn = document.getElementById("start-count");
toZero = oDay.innerHTML = oHour.innerHTML = oMinute.innerHTML = oSecond.innerHTML = "00";
startBtn.onclick = function() {
end = endtime.value;
if (!end) {
alert("Please enter dateļ¼")
return false;
};
countDown(tx, rs);
timer = setInterval(countDown, 1000);
}
function countDown(tx, rs) {
var timedate = new Date(Date.parse(end.replace(/-/g, "/")));
var now = new Date();
var date = (timedate.getTime() - now.getTime()) / 1000;
var day = Math.floor(date / (60 * 60 * 24));
var _hour = date - day * 60 * 60 * 24;
var hour = Math.floor(_hour / (60 * 60));
var _minute = _hour - hour * 60 * 60;
var minute = Math.floor(_minute / (60));
var _second = _minute - minute * 60;
var second = Math.floor(_second);
}
function toDou(n) {
if (n < 10) {
return '0' + n;
} else {
return '' + n;
}
}
if (date > 0) {
oDay.innerHTML = toDou(day);
oHour.innerHTML = toDou(hour);
oMinute.innerHTML = toDou(minute);
oSecond.innerHTML = toDou(second);
} else {
btn.className = "";
btn.className = "btn";
btn.onclick = function() {
alert("oops")
}
endtime.value = "";
clearInterval(timer);
toZero;
}
Edit: Current error is "Uncaught TypeError: Cannot set property 'innerHTML' of null" at line 106 which is toZero = oDay.innerHTML = oHour.innerHTML = oMinute.innerHTML = oSecond.innerHTML = "00";, haven't gotten any time output yet. It is instead giving undefined.
Edit: For the days, hours, minutes, and seconds I am receiving [object HTMLSpanElement] instead of the actual values behind the elements when viewing the page? Overall, the value isn't being read correctly.
Code Example: https://codepen.io/Wssoop/pen/poEbzve
I am trying to Show a Countdown Timer Inside Foreach loop for every record in PHP Codeigniter Framework, It is basically showing Datediff between current date and mysql database date value as how many days left, Below is my code.Problem is it is showing countdown timer for single record only not for every record i need
<?php foreach ($my_courses as $my_course):
$course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();
<!-- countdown timer-->
<?php if ($course_details['is_onlineclass']==='Yes'): ?>
<span style="display:inline-block;font-size:12px;font-color:crimson;"><?php
$t=$course_details['live_class_schedule_time'];
//time difference in seconds for coundown timer
$date = new DateTime();
$date2 = new DateTime(date("yy-m-d h:i:s a", $t));
$diff = $date->getTimestamp() - $date2->getTimestamp() ;
echo $diff;
?></span>
<span id="<?echo $my_course['course_id']?>" class="timer" style="font-size:smaller;color:crimson;"></span>
<?php endif; ?>
<script>
var initialTime = <?echo $diff?>;
var seconds = initialTime;
function timer() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('<?echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
if (seconds == 0) {
learInterval(countdownTimer);
document.getElementById('<?echo $my_course['course_id']?>').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
What is the wrong I am doing and How to show the timer for every record
Your function name and call should also be unique.
EDIT
Also you messed up a log of code. I have commented the foreach loop and put my own for loop. Modify accordingly
Try this.
<?php
$my_course['course_id'] = 0;
for($i = 0; $i <= 2; $i++):
// foreach ($my_courses as $my_course):
// $course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();
// You need to comment this out when you put your code live
$course_details['is_onlineclass'] = "Yes";
$course_details['live_class_schedule_time'] = time() + rand(0, 300);
$my_course['course_id'] += 1;
// remove till here
if ($course_details['is_onlineclass']==='Yes'):
?>
<span style="display:inline-block;font-size:12px;font-color:crimson;">
<?php
$t=$course_details['live_class_schedule_time'];
//time difference in seconds for coundown timer
$date = new DateTime();
$date2 = new DateTime(date("yy-m-d h:i:s a", $t));
$diff = $date->getTimestamp() - $date2->getTimestamp() ;
?>
</span>
<span id="<?php echo $my_course['course_id']; ?>" class="timer" style="font-size:smaller;color:crimson;"></span>
<?php endif; ?>
<script>
var initialTime = <?php echo $diff; ?>
var seconds = initialTime;
function timer<?php echo $my_course['course_id'];?>() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
if (seconds == 0) {
learInterval(countdownTimer);
document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer<?php echo $my_course["course_id"];?>()', 1000);
</script>
<?php endfor; ?>
EDIT: Here is your code
<?php
foreach ($my_courses as $my_course):
$course_details = $this->crud_model->get_course_by_id($my_course['course_id'])->row_array();
if ($course_details['is_onlineclass']==='Yes'):
?>
<span style="display:inline-block;font-size:12px;font-color:crimson;">
<?php
$t=$course_details['live_class_schedule_time'];
//time difference in seconds for coundown timer
$date = new DateTime();
$date2 = new DateTime(date("yy-m-d h:i:s a", $t));
$diff = $date->getTimestamp() - $date2->getTimestamp() ;
?>
</span>
<span id="<?php echo $my_course['course_id']; ?>" class="timer" style="font-size:smaller;color:crimson;"></span>
<?php endif; ?>
<script>
var initialTime = <?php echo $diff; ?>
var seconds = initialTime;
function timer<?php echo $my_course['course_id'];?>() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = days + "days " + hours + "hours " + minutes + "min " + remainingSeconds+ "sec left";
if (seconds == 0) {
learInterval(countdownTimer);
document.getElementById('<?php echo $my_course['course_id']?>').innerHTML = "Completed";
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer<?php echo $my_course["course_id"];?>()', 1000);
</script>
<?php endforeach; ?>
I have a time range slider implemented using Jquery and JqueryUI.
$("#slider-range").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [600, 720],
slide: function (e, ui) {
var hours1 = Math.floor(ui.values[0] / 60);
var minutes1 = ui.values[0] - (hours1 * 60);
if (hours1.length == 1) hours1 = '0' + hours1;
if (minutes1.length == 1) minutes1 = '0' + minutes1;
if (minutes1 == 0) minutes1 = '00';
if (hours1 >= 12) {
if (hours1 == 12) {
hours1 = hours1;
minutes1 = minutes1 + " PM";
} else {
hours1 = hours1 - 12;
minutes1 = minutes1 + " PM";
}
} else {
hours1 = hours1;
minutes1 = minutes1 + " AM";
}
if (hours1 == 0) {
hours1 = 12;
minutes1 = minutes1;
}
$('.slider-time').html(hours1 + ':' + minutes1);
var hours2 = Math.floor(ui.values[1] / 60);
var minutes2 = ui.values[1] - (hours2 * 60);
if (hours2.length == 1) hours2 = '0' + hours2;
if (minutes2.length == 1) minutes2 = '0' + minutes2;
if (minutes2 == 0) minutes2 = '00';
if (hours2 >= 12) {
if (hours2 == 12) {
hours2 = hours2;
minutes2 = minutes2 + " PM";
} else if (hours2 == 24) {
hours2 = 11;
minutes2 = "59 PM";
} else {
hours2 = hours2 - 12;
minutes2 = minutes2 + " PM";
}
} else {
hours2 = hours2;
minutes2 = minutes2 + " AM";
}
$('.slider-time2').html(hours2 + ':' + minutes2);
}
});
Here is the fiddle for the current time slider : http://jsfiddle.net/jrweinb/MQ6VT/
I want to achieve the exact same result using AngularJS since i am
working in an angular project.
Any idea if such a thing is available in angularJS or is it possible to convert
this into angular ?
You can use angular-range slider
http://danielcrisp.github.io/angular-rangeslider/
http://danielcrisp.github.io/angular-rangeslider/demo
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular rangeSlider Demo</title>
<!-- Bootstrap CSS from CDN -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<!-- Angular rangeSlider CSS -->
<link href="../angular.rangeSlider.css" rel="stylesheet">
</head>
<body style="padding-bottom: 50px;">
<div class="container" ng-controller="DemoController">
<div class="row">
<div class="span12">
<pre>
$scope.demo1 = {
min: 20,
max: 80
};</pre>
</div>
<div class="span5">
<h4>Default slider</h4>
<div range-slider min="0" max="100" model-min="demo1.min" model-max="demo1.max"></div>
</div>
<div class="span2"></div>
<div class="span5">
<h4>Vertical slider</h4>
<div range-slider orientation="vertical" min="0" max="100" model-min="demo1.min" model-max="demo1.max"></div>
</div>
<hr />
<hr />
</div>
<!-- we need jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<!-- and Angular, of course -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<!-- and out directive code -->
<script src="../angular.rangeSlider.js"></script>
<!-- a basic app and controller -->
<script>
// basic angular app setup
var app = angular.module('myApp', ['ui-rangeSlider']);
app.controller('DemoController',
function DemoController($scope) {
// just some values for the sliders
$scope.demo1 = {
min: 20,
max: 80
};
}
);
</script>
</body>
</html>
This is my countdown script :
<script type='text/javascript'>
function cronometru(timp_ramas) {
Ore = Math.floor(timp_ramas / 3600);
minute = Math.floor((timp_ramas - Ore * 3600) / 60);
secunde = timp_ramas - minute * 60 - Ore * 3600;
if (Ore < 10){ Ore = "0"+ Ore; }
if (minute < 10){ minute = "0" + minute; }
if (secunde < 10){ secunde = "0" + secunde; }
if (timp_ramas > 0) {
timp_ramas--;
document.getElementById("timp").innerHTML = Ore + ':' + minute + ':' + secunde;
setTimeout("cronometru("+timp_ramas+")", 1000);
} else {
document.getElementById("timp").innerHTML = "Focul s-a stins !";
}
}
$timp_ramas = $citeste['timp_ramas_pentru_foc'] - time(); // this is the function that retrives the actual time from an database.
I use this "wz_tooltip.js" for the tooltip events.
<script type="text/javascript" src="wz_tooltip.js"></script>
When i try to put to show my conuntdown in the tooltip the tooltip goes black and show only the message before or after the countdown position ('Timp ramas :')
Example :
if ($citeste["timp_ramas_pentru_foc"] > 0)
{
echo "
<a onmouseover=
\"Tip('Timp ramas : <span id=timp></span> ')\"
onmouseout=\"UnTip()\">
<img src='img/skiluri/fire_yes.png'/> </a>
";
}
I found a way to make the code to work but the timer will be shown in 2 places in the same time. I want only to read it when i move the cursor on some picture / text and the tooltip apears.
Example of working code with 2 views in the same time :
$timp_ramas = $citeste['timp_ramas_pentru_foc'] - time();
?>
<script type='text/javascript'>
function cronometru(timp_ramas) {
Ore = Math.floor(timp_ramas / 3600);
minute = Math.floor((timp_ramas - Ore * 3600) / 60);
secunde = timp_ramas - minute * 60 - Ore * 3600;
if (Ore < 10){ Ore = "0"+ Ore; }
if (minute < 10){ minute = "0" + minute; }
if (secunde < 10){ secunde = "0" + secunde; }
if (timp_ramas > 0) {
timp_ramas--;
document.getElementById("timp").innerHTML = Ore + ':' + minute + ':' + secunde;
setTimeout("cronometru("+timp_ramas+")", 1000);
} else {
document.getElementById("timp").innerHTML = "Focul s-a stins !";
}
}
<script src="js/meniu_dreapta/iconmenu.js"></script>
<body>
<script type="text/javascript" src="js/tooltip/wz_tooltip.js"></script>
<span id='timp'></span> <?php echo "<script type='text/javascript'>cronometru(".$timp_ramas.")</script>"; ?>
<?php
echo '
<html>
<ul id="myiconmenu" class="iconmenu"> ';
if ($citeste["timp_ramas_pentru_foc"] > 0)
{
echo "
<a onmouseover=
\"Tip('Timp ramas : <span id=timp></span> ')\"
onmouseout=\"UnTip()\">
<img src='img/skiluri/fire_yes.png'/> </a>
";
}
Thank you.