//PROBLEM SOLVED//
It turned out that the JQuery Ajax call couldn't reach the URL in certain browsers.
Thanks anyway guys, for your quick responses, definitly helped to work it out.
Sorry for the non-specific title, I don't even think what should be the problem.
There is a JQuery plugin (http://keith-wood.name/countdown.html) which counts down from a specific date or time.
The end time from which the counter should start can be defined in 2 ways: either setting a date either setting the number of seconds left.
My project needs the second one and based on the documentation this option has to be declared like:
$('#digital_hour').countdown({until: +300});
Notice the "+" sign before the number.
It works nice on any OS and device, UNTIL I replace the number 300 with a variable that stores the seconds left until the end of the day on the server. So this version:
$('#digital_hour').countdown({until: +seconds_left_on_server});
works on specific browsers, but on others don't. Strangly enought it works under my Vista/Mozilla20.0 combo, but it doesn't on my Vista/IE6, nor on my friends Ubuntu/Mozilla combo.
I'm not a huge javascript admirer, nor an expert on the subject, but I feel that there is something around the "+" sign.
Can anyone help?
You can try with
$('#digital_hour').countdown({until: new Date(+(new Date()) + 1000 * seconds_left_on_server)});
Have you tried something simple like var seconds_left = 300 and then $('#digital_hour').countdown({until: +seconds_left}); and see what happens?
It sounds like your variable is not storing what it should. The "+" shouldn't be a problem.
Related
I'm using Algolia's rangeslider from instantsearch.js with tooltips set to false. When the slider's maximum value is displayed (the value to the right side of the slider) (e.g: 2,000), I want it to display as (e.g: 2,000+) (with a "+").
I've tried accessing/resetting the value with jquery like this:
var $sliderMax = $('#my_slider_identifier .ais-range-slider--value').last();
And I've succeeded in getting a handle on the variable, but when I try resetting the maximum value from a custom widget's render() function (so it updates with each new set of results coming in) with the equivalent of $sliderMax.text('2,000' + '+'), nothing happens - I assume because the DOM is being re-written after my call..
If the rangeSlider is showing the maximum value (e.g: 2000), Is there a recommended way to put a '+' on the end?
EDIT:
To give more background: Though I have a range of values from 0-10,000+, the vast majority of the data is in the 0-2000 range, and I thus, truncated my data so that if it's >2000, it shows as 2000.
Also, incidentally and oddly, As a hack, I found that I can write to the DOM if I use a setTimeout of 0 ms (yes, there are stackoverflows on this) and re-do a JQuery selection:
setTimeout(function(){
$('#index_price_eur_day_i .ais-range-slider--value').last()
.text(MAX_PRICE_SLIDER + '+');}, 0);
I'd love to find a more-efficient solution.
I heard from Tim Carry of Algolia and he suggested that I try the :after pseudo element of CSS to fix this.
Indeed, I added this CSS and it always adds a + -- unfortunately even when the slider is not at the max value :/
#my_slider_identifier .ais-range-slider--value:last-of-type::after {
content: "+";
}
So it's not a perfect solution, but it may be "good-enough" - and it's not as ugly/inefficient as using jquery. If anyone has a better solution, please post it!
I have installed the angular-timer module on my application.
It works fine when I use it like the examples on that page, for instance, the code below yields the correct output:
<timer start-time="1357020000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
However, when I insert an expression inside the start-time attribute, I get this error
The expression {{order.lastUpdatedDate}} if used outside an attribute, correctly outputs the time in miliseconds, and if I copy-paste that result into an start-time attribute on the directive, it works!
So my guess is that this directive doesn't work with expressions... :(
I want to correct that, but I'm fairly new to Angular and I don't know how to begin.
Can anybody help me, or at least point a direction for me to research, please?
Try removing the {{ }}
<timer start-time="order.lastUpdateDate">
Here is a gotcha: the start-time attribute is evaluated only once during start.
In your example, order.lastUpdateDate might actually be calculated after the timer starts because it autostarts, so the timer will not show what you would expect.
There are a few ways to fix this:
stop and start the timer after the value changed,
Change the code to evaluate the start-time in the tick function (simplest approach,works for me)
Change the code to set up a watch to detect when the start-time value changes and reevaluate it.
I just can't seem to wrap my head around the proposal.
How can I have an array that displays which button was pressed and at what time.
The simpler the better as I'm still learning Javascript, thanks guys.
This is what I've come up with so far
var getTime = (document.getElementById("bass") + Date.now());
You should check the way you get the Date, check this:
How do I get the current date in JavaScript?
Regards
I have been set an assignment to create my own simplified version of the game cookie clicker (http://orteil.dashnet.org/cookieclicker/). I have managed to get almost everything working with the exception of one thing, I'm trying to print an alert to say that in order to buy an upgrade, you first need X amounts more rashers of bacon, (the player increases their amount of rashers through clicking on the image of bacon).
These are my current declared variables:
<script>
var RPS=0;
var RPC=1;
var bacon=0;
var RPCPrice=50;
var RPSPrice=50;
</script>
With RPS meaning the current number of rashers the player is getting per second, RPC meaning the current number of rashers the player is getting per click, and RPC/RPS Price being the cost in rashers of the next upgrade.
I have managed to get an alert to say the correct number of rashers a player is away from the price of the next upgrade by using:
document.getElementById('errors').innerHTML="You can't afford this RPC upgrade, you need " + (RPCPrice-bacon + " more rashers!");
However was wondering if there was a more efficient way to do this by declaring a variable suchas:
var neededRPS=Math.round(RPSPrice-bacon);
and then changing the alert too:
document.getElementById('errors').innerHTML="You can't afford this RPS upgrade, you need " + neededRPS + " more rashers!");
however this does not seem to work.
Any help would be much appreciated, or if anybody knows of any simpler way to do this
please enlighten me! I am a javascript newbie so apologies in advance if this has a very simple fix i have missed.
Cheers
You have a syntax error in your code which is why it likely doesn't work. Remove the end ). The follow is the line with the error removed.
document.getElementById('errors').innerHTML="You can't afford this RPS upgrade, you need " + neededRPS + " more rashers!";
For errors like this try looking at your browsers javascript console
The page having problems is...
http://schnell.dreamhosters.com/index.php?page=gallery#
I use Firebug to debug my jQuery and other code tidbits and it's been proving very useful for Javascript/jQuery debugging. However, at the same time, it's been one of the most frustrating debugging experiences I've ever gone through. I'm not sure why but sometimes it seems like I can copy someone else's methodology from a tutorial, character for character, and yet still come up with errors.
In any case, the problem here is that Firebug claims there is a bug on line 20 of the source.
missing : after property id
[Break on this error] $('#table').animate({"left: " + attr + "px"}, 2000);\n
This bug seems like a huge load to me because the colon is right there! And this is why debugging jQuery/Javascript is such a pain sometimes. The error messages are rather convoluted and sometimes don't even make a lick of sense to me. Or maybe that's just Firebug.
Either way, the goal I'm going for here is that I'm trying to dynamically change the animate function such that the more you click the left arrow, the further left the grid of images is shifted (due to the nature of the CSS 'left' property). I have Javascript variables and a hidden input tag to help hold essential values, but the major hurdle is getting the animate function to recognize these variables. Near as I can tell it will only accept string literals for arguments on how to animate and the documentation doesn't help me because it doesn't discuss the use of variables with animate, as if it's impossible.
Well, let's just say I don't like impossible, he likes to get in my way a lot.
The object literal passed to the animate function is not well formed, it should be:
$('#table').animate({left: attr + "px"}, 2000);
Edit: Looking closely to your code, you are also trying to get a value from an input with id = "count", and you have a missing # character to have an ID selector:
var count = +$('#count').val(); // get #count value as Number
You are also incrementing this count variable, but you should first convert it to Number, because the value attribute of input elements are string. (I did it using the unary plus operator on the right-hand side of the assignment).
You have to convert it to a number, because if you add two variables and one of them is a string, concatenation will take place:
"1" + 1 == "11"
Try:
$('#table').animate({left: attr}, 2000);
The "px" units of measurement here aren't necessary. That aside, the above is the correct creation of an anonymous object. You were just putting a string inside curly braces.