I use LIVE Highchart with 2 live graphs. The chart should display only 5 datapoints at on time. Therefore is the shift-argument
var series1 = chart.series[0];
shift1 = series1.data.length > 5;
series1.addPoint(point1, true, shift1);
So when point six arrives, point one is thrown away. But when i disable a series for a while ... and after enabling it again ... there was no shift.
http://www.abload.de/img/errorh5kko.jpeg
I reproduced it on jsfiddle for you
http://jsfiddle.net/yeDYr/1/
So both livegraphs no matter whether enabled or disabled should be shifted.
Looks like a bug in Highcharts to me. As a workaround, just .show() the series, then hide() it (if needed). Highcharts seems to be able to do this without any visible flickering.
// the button action
$('#button1').click(function() {
var point1 = Math.random() * 10;
var point2 = Math.random() * 10;
var series1 = chart.series[0];
shift1 = series1.data.length > 5;
isVisible = series1.visible;
if (!isVisible) series1.show();
series1.addPoint(point1, true, shift1);
if (!isVisible) series1.hide();
var series2 = chart.series[1];
shift2 = series2.data.length > 5;
isVisible = series2.visible;
if (!isVisible) series2.show();
series2.addPoint(point2, true, shift2);
if (!isVisible) series2.hide();
});
Updated fiddle.
Related
I have a table out of different MySQL data. I want to highlight cells with the same ID in it on hover. I did that with a simple jQuery, the script is almost working but you see I've got the var nr and want the integer i to be added to the class string. What is my mistake, why isn't it working? If you change the var nr = '.id_' + i; to a static variable like var nr = '.id_2'; it is working.
for (i = 0; i < 10; i++) {
var nr = '.id_' + i;
var bgcol = $(nr).css('backgroundColor');
$(nr).hover(
function(){
$(nr).css({"background":"yellow"});
},function(){
$(nr).css({"background":bgcol});
});
}
http://jsfiddle.net/Nkdny/210/
Solution, thanks to Karl-André Gagnon: http://jsfiddle.net/Nkdny/215 Look in the comments for details.
You're missing an echo in front of your php statement.
<?php echo $amount; ?>
Ok, here's my issue. The following code works as intended, but I have this nagging feeling that I should be able to solve the problem more succinctly. I'm writing a script that will allow a person to pan/tilt/zoom an IP camera using custom controls on an html page. I've layed out the direction icons in a numberpad-style arrangement representing up, down, left-up etc... like so:
1 2 3
4 _ 6
7 8 9
When the user holds the mousedown on an icon, the img is swapped out for an active version and the command to begin the action is sent to a php cURL script, along with the respective direction (icon id). When the mouse is released the image is again swapped for the inactive version and the command is sent to the cURL script to stop moving in that same direction.
This works as long as the mouse is kept hovering over the same icon that was initially selected. If the person let the mouse leave the icon and then releases it, the second function checks to see if any of the directions are currently activated, inactivating them and sending a respective stop command to the cURL script.
Is there a way to actually accomplish this using one function?
// PTZ MOVEMENT / IMAGE SWAP
$('.nav-control').on('mousedown mouseup', '.ptz-cmd', function(e){
var thisCmd = $(this).attr('id'); // 1 - 9, designating numberpad style of movement
var thisAction = $(this).attr('action') // pantilt or zoom
if (e.type == 'mousedown') {
$(this).attr('src','img/' + thisCmd + 'h.png'); // example: 1h.png = active icon, 1b.png = inactive icon
$('#ptz').load("ptz.php?action=" + thisAction + "&cmd=" + thisCmd); // movement is handled by php cURL script and 'loaded' into a hidden div
} else {
$(this).attr('src','img/' + thisCmd + 'b.png');
$('#ptz').load("ptz.php?action=" + thisAction + "&cmd=stop"); // stop the movement or zoom for this direction...
}
});
// CANCEL MOVEMENT AND REPLACE IMAGE IF MOUSE LEAVES ICON AND IS RELEASED
$('.nav-control').on('mouseleave', '.ptz-cmd', function(e){
$('#ptz').load("ptz.php?action=pantilt&cmd=stop");
$('.ptz-cmd:not([action=preset])').each(function(){
if($(this).attr('src').substring(5) == "h.png"){
var whichDirection = $(this).attr('src').substring(0,5);
$(this).attr('src',whichDirection + 'b.png')
}
});
});
Absolutely:
var $ptz = $('#ptz');
$('.nav-control').on({
mousedown:function(){
var self = this,
thisCmd = self.id,
thisAction = self.action;
self.src = 'img/' + thisCmd + 'h.png';
$ptz.load("ptz.php?action=" + thisAction + "&cmd=" + thisCmd);
},
mouseup:function(){
var self = this,
thisCmd = self.id,
thisAction = self.action;
self.src = 'img/' + thisCmd + 'b.png';
$ptz.load("ptz.php?action=" + thisAction + "&cmd=stop");
},
mouseleave:function(){
$ptz.load("ptz.php?action=pantilt&cmd=stop");
$('.ptz-cmd').filter(':not([action=preset])').each(function(){
var self = this,
src = self.src;
if(src.substring(5) === 'h.png'){
self.src = src.substring(0,5) + 'b.png';
}
});
}
},'.ptz-cmd');
Changes:
By using the object form of .on(), you can consolidate these three events into a single binding
By splitting mousedown and mouseup, there is less runtime parsing (no checking events, less code per run of each, etc)
Using vanilla JS vs jQuery is faster, used for items like src,id, and action.
Use of === instead of == is more strict, and therefore more standards-compliant
Caching of $('#ptz') at top will save extra DOM scrapes
This isn't tested, but the theory behind it is sound. Even if you only take away the first point, you will have consolidated all your event bindings into a single call, and delegated appropriately.
Alternative:
var $ptz = $('#ptz');
$('.nav-control').on({
'mousedown mouseup':function(e){
var self = this,
cmdImg = self.id,
thisAction = self.action,
img = 'h',
thisCmd = cmdImg;
if(e.type === 'mouseup'){
img = 'b';
thisCmd = 'stop';
}
self.src = 'img/' + cmdImg + img + '.png';
$ptz.load("ptz.php?action=" + thisAction + "&cmd=" + thisCmd);
},
mouseleave:function(){
$ptz.load("ptz.php?action=pantilt&cmd=stop");
$('.ptz-cmd').filter(':not([action=preset])').each(function(){
var self = this,
src = self.src;
if(src.substring(5) === 'h.png'){
self.src = src.substring(0,5) + 'b.png';
}
});
}
},'.ptz-cmd');
This just maintains the mouseup and mousedown combination, checking the event type to see which it is. Its every-so-slightly slower, but consolidates the codebase into a single function, making maintenance a bit easier. Notice in this option when you have two different events you need to make it a string, e.g. 'mouseup mousedown' vs mouseup mousedown ... you can only use the object names if there is a single object.
Either one of these options should put you on the right track.
Hey i have made a countdown, but what i want is a div that change width after the day.
Let's say there is 150 days back to someday, then i want the div to be 150px in width. Is this possibel? I have seach all over the web.
it's simple. store start date and update div via counting difference with now. Every 150 days re-store start date.
here's some pseudocode
var start=17/01/2013 //stored date
func countDifference(){
return differenceIs=now()-start+1;
}
func setWidth(){
div.width=countDifference();
}
For a purely php method, you could assign a class to the div based on the number of days, but then you'd need a css style specified for every single possible width.
It would be better to do it via javascript - Sugar's answer contains a basic method.
You could also use the css method in jQuery to change a css width attribute.
http://api.jquery.com/css/
You can do one thing like given below..
<div id="test" style='background-color:red;color:white;display:block;width:150px;'>asdasdsdasda</div>
<script>
$(document).ready(function(e){
var today = new Date();
var startday = new Date('01/15/2013');
var width = 150;
var diff = DateDiff(new Date(today),new Date(startday));
diff = parseInt(diff);
var val = parseInt(parseInt(diff) / parseInt(width));
if( val >= 1 ){
diff = parseInt(parseIn(diff) - parseInt(width * val));
}
var now_width = width - diff;
$('#test').css('width' , parseInt(now_width));
function DateDiff(date1, date2) {
var datediff = date1.getTime() - date2.getTime();
return (datediff / (24*60*60*1000));
}
});
</script>
Please check url given below
JsFiddle Example
I hope it will be helpful for you.
thanks
i have this script i'm using to display random images with hyperlinks. can anyone tell me how i might adapt it to display 5 random images at once, preferably without repeating the same image twice?
Thanks
<script language="JavaScript">
<!--
/*
Random Image Link Script- By JavaScript Kit(http://www.javascriptkit.com)
Over 200+ free JavaScripts here!
Updated: 00/04/25
*/
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="data/adverts/ad1.png"
myimages[2]="data/adverts/ad2.png"
myimages[3]="data/adverts/ad3.png"
myimages[4]="data/adverts/ad4.png"
myimages[5]="data/adverts/ad5.png"
//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="http://www.javascriptkit.com"
imagelinks[2]="http://www.netscape.com"
imagelinks[3]="http://www.microsoft.com"
imagelinks[4]="http://www.dynamicdrive.com"
imagelinks[5]="http://www.freewarejava.com"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>
function random_imglink(){
var myimages=new Array();
...
var imagelinks=new Array();
...
var used = [];
var ry;
var howmany = 5;
for (var i = 1; i <= howmany; i++) {
ry=Math.ceil(Math.random()*myimages.length);
while(used.indexOf(ry)!=-1){
ry=Math.ceil(Math.random()*myimages.length);
}
used.push[ry];
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
}
this assumes you're going to put more images in your array than 5.
Instead random and checking with while if you have already chosen an image you can move the choosen image to the end of the array and reduce the variable for the random by one. Example:
function random_imglink(select){
if (select > 5 ) {
// make it fail ...
}
//specify random images below. You can have as many as you wish
var myimages = new Array();
myimages[0]="data/adverts/ad1.png"
myimages[1]="data/adverts/ad2.png"
myimages[2]="data/adverts/ad3.png"
myimages[3]="data/adverts/ad4.png"
myimages[4]="data/adverts/ad5.png"
//specify corresponding links below
var imagelinks=new Array()
imagelinks[0]="http://www.javascriptkit.com"
imagelinks[1]="http://www.netscape.com"
imagelinks[2]="http://www.microsoft.com"
imagelinks[3]="http://www.dynamicdrive.com"
imagelinks[4]="http://www.freewarejava.com"
var size = myimages.length
for (var i=0;i<select;i++) {
var index = Math.floor(Math.random() * size);
document.write('<a href='+'"'+imagelinks[index]+'"'+'><img src="'+myimages[index]+'" border=0></a>');
var tmp = myimages[index];
myimages[index] = myimages[size - 1];
myimages[size - 1] = tmp;
tmp = imagelinks[index];
imagelinks[index] = imagelinks[size - 1];
imagelinks[size - 1] = tmp;
--size;
}
}
random_imglink(3);
It could be something like that in one line of code and without creating functions:
<img src="https://www.example.com/images/image-<?php echo rand(1,7); ?>.jpg">
In order to get this to work, you’ll want to name your images: image-1.jpg, image-2.jpg, image-3.jpg....image-7.jpg,
When the page loads, the PHP rand() will echo a random number (in this case, a number between 1 and 7), completing the URL and thus displaying the corresponding image. Source: https://jonbellah.com/load-random-images-with-php/
I incorporate javascript in my PHP program:
Try to check my codes.
It loops depend on the number of records in database.
for instance:
$counter = 0;
foreach($row_value as $data):
echo $this->javascript($counter, $data->exrate, $data->tab);
endforeach;
private function javascript($counter=NULL, $exrate=NULL, $tab=NULL){
$js = "
<script type='text/javascript'>
$(function () {
var textBox0 = $('input:text[id$=quantity{$counter}]').keyup(foo);
var textBox1 = $('input:text[id$=mc{$counter}]').keyup(foo);
var textBox2 = $('input:text[id$=lc{$counter}]').keyup(foo);
function foo() {
var value0 = textBox0.val();
var value1 = textBox1.val();
var value2 = textBox2.val();
var sum = add(value1, value2) * (value0 * {$exrate});
$('input:text[id$=result{$counter}]').val(parseFloat(sum).toFixed(2));
// Compute Total Quantity
var qtotal = 0;
$('.quantity{$tab}').each(function() {
qtotal += Number($(this).val());
});
$('#tquantity{$tab}').text(qtotal);
// Compute MC UNIT
var mctotal = 0;
$('.mc{$tab}').each(function() {
mctotal += Number($(this).val());
});
$('#tmc{$tab}').text(mctotal);
// Compute LC UNIT
var lctotal = 0;
$('.lc{$tab}').each(function() {
lctotal += Number($(this).val());
});
$('#tlc{$tab}').text(lctotal);
// Compute Result
var result = 0;
$('.result{$tab}').each(function() {
result += Number($(this).val());
});
$('#tresult{$tab}').text(result);
}
function add() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
if (IsNumeric(arguments[i])) {
sum += parseFloat(arguments[i]);
}
}
return sum;
}
function IsNumeric(input) {
return (input - 0) == input && input.length > 0;
}
});
</script>
";
return $js;
}
When I running this on IE7 this message is always annoying me
Stop running this script?
A script on this page is causing your web browser to
run slowly. If it continues to run, your computer
might become unresponsive.
but in firefox it's functioning well.
IE displays that message when it decides that a script is taking too long (actually other browsers have a similar warning, but they don't all calculate "too long" the same way and don't all run at the same speed).
You didn't actually ask a question, but I assume you want to know how to make your script more efficient so that it will (we hope) complete before that IE message is triggered?
I like jQuery a lot, but using it does involve a lot of function calls, including nested functions with callbacks, etc., and once you start putting these functions inside loops (in your case multiple loops) it can get quite inefficient. If you're only processing a small number of items this may not be noticeable to the user, but if you're processing a lot the first thing you could change that would definitely speed up your code would be changing the .each() loops to standard for loops:
// CHANGE
var qtotal = 0;
$('.quantity{$tab}').each(function() {
qtotal += Number($(this).val());
});
// TO
var qtotal = 0,
$q = $('#tquantity{$tab}');
for (i = 0; i < $q.length; i++)
qtotal += +$q[i].value;
Note that in the for loop I've used the DOM element's value property directly rather than using jQuery to retrieve it via .val() (which even within .each() you could've done with this.value rather than $(this).val()). I've also used the unary plus operator instead of Number(). This means no function calls at all on loop iterations, whereas your way had a call to Number(), $() and .val() (not even counting the additional processing that jQuery does behind the scenes within $() and .val()).
Make a similar change for all of your .each() loops (declare i at the beginning of your function and re-use it for each loop) and you should see some improvement.