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.
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 something like the following in a template:
<div ng-if="foo">
...
</div>
<div ng-class="foo && 'foo-is-present'">
...
</div>
In the controller for this scope, I have the following:
$scope.foo = $resource("path/to/resource").query();
The resource loads just find and returns a simple JSON array (verified by watching request in Chrome), and other debugging shows that foo contains the array, exactly as it should. The second div applies the foo-is-present class as expected, however the first div still has its ng-if evaluating to false, preventing that div from rendering.
This doesn't seem right, as I want that first div to show up once the results of the resource have been loaded. What am I missing here?
EDIT It turns out ng-if's version of "truthy" does not include arrays, even if the array is not empty. I was able to work around this by adding turning the condition into ng-if="!!foo", but this feels hacky. If anyone has any better insight or solutions, please share!
Also in the Edit, above, but added as an answer so it is more immediately visible as a (hopefully) useful workaround.
It turns out ng-if's version of "truthy" does not include arrays, even if the array is not empty. I was able to work around this by adding turning the condition into ng-if="!!foo", but this feels hacky. If anyone has any better insight or solutions, please share!
What version of AngularJS are you using?
I'm using 1.2.10 and:
$scope.foo = [];
ng-if="foo"
Evaluates to true.
Perhaps the first div is not within the scope of the controller that contains foo?
//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.
I have created a slideshow widget, using jQuery.UI widgets that works with window.setInterval.
I am trying to have more than one slideshow in the same page and i get the following results:
If I try invoking the same widget for both of my divs with images:
$('#div1').slideshow();
$('#div2').slideshow();
none of them work;
I have cloned the definition of my widget and named it slideshowsmall
$('#div1').slideshow();
$('#div2').slideshowsmall();
and only the second one works.
my widget code is in this pastebin, but i really think the problem, at least in the second try, has to do with setInterval
Thanks
Having multiple setInterval() by itself cannot be causing problems. It is more likely to have something to do with the code it's executing (and your widget code being non-english makes it very hard to analize and comprehend).
setInterval() returns and integer ID of the "interval", so that you can later clearInterval(...) by passing this ID. This scenario was implemented exactly for multi-interval uses. More details on MDC
As per your widget code when setInterval calls the ChangeLeft/Right.. method the slideshowdiv variable always points to the last element on which slideShow is called. the reason for this is the way you are invoking change methods which is not adviceable.
Please use the below code to call your change method it should solve your problem. You will notice I am passing the slideshowdiv object to change methods.
this.options.timer = window.setInterval(function () {
ChangeImageLeft(velocidade, slideshowdiv);
}, intervalo);
Let me know if you need more info.
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.