Error in javascript function - javascript

I am using the following code
function xhi(aax)
{
var aby=document.getElementById(aax);
aby.style.bottom=(parseInt(aby.style.bottom)+(screen.height-42)/10)+'px';
if(parseInt(aby.style.bottom)<(screen.height-42))setTimeout('xhi("'+aax+'")',25);
}
When i run this code the function calls itself only two times . second time aby.style.bottom becomes Null.Why?

Check the bottom value. It might be crazy, but if the value is something like 008, 010, etc.
parseInt treats the number as octal. In order to avoid this, use :
parseInt(aby.style.bottom,10)
Why are you using bottom? I believe the best approach is the top attribute.
If everything else fails, jQuery has some nice functions to animate and to grab those style attributes.

I am not sure but try after removing from your code +'px' .

Related

string inside php inside html inside javascript

i've searched on the site but i could find nothing that could help me.
I have a javascript code inside html inside php, i would like to know how i can put a string inside the javascript code with "breaking" the href with double quotes. Here is the code i have:
return '<li class="slide_li" onmouseover="gmarkers['+marker_num+'].setIcon(getMarkerImage("grey", price, cur));" onmouseout="gmarkers['+marker_num+'].setIcon(gicons.blue)">'+details+'</li>';
The "grey" value breaks the href, i tried different ways like:
'grey', \'grey\', \"grey\" ecc.. but none of this worked for me. Any help is really appreciated. Thanx!
To avoid such pain in the future, I am suggesting you my way of doing things in such scenarios.
Since you are already using jQuery library, why not to use its way of handling events:
$('li.slide_li').on({
mouseover: function(e){
},
mouseoutleave:function(e){
});
instead of using inline javascript. This will make you away from dealing with quotes. Additionnaly, by seperating the concerns this way, you make your php return only markup.
About additional variables (like the variable containing 'grey'), I suggest you use data attributes, something like:
return '<li class="slide_li" data-color='grey'></li>
in javascript:
var color= $('li.slide_li').data(color);
// use color variable in code inside mouseover and mouseout
I am not telling here that the other answers are not adressing your current problem, I am only sharing a way I was told in the past it is a better way.
You need to wrap your javascript variable with additional single quote and then you need to used backslash like below:
return '<li class="slide_li" onmouseover="gmarkers[\''+marker_num+'\'].setIcon(getMarkerImage("grey", price, cur));" onmouseout="gmarkers[\''+marker_num+'\'].setIcon(gicons.blue)">'+details+'</li>';
I tried with this "grey"
and it works!
Thank you everybody!
Try setting the variable outside of the javascript first:
var variable="grey"
return '<li class="slide_li" onmouseover="gmarkers['+marker_num+']
.setIcon(getMarkerImage(variable, price, cur));" onmouseout="gmarkers['+marker_num+']
.setIcon(gicons.blue)">'+details+'</li>'
;

Using MVC resource in Jquery - function stops working

I have a Jquery function in MVC View that check if at least one checkbox is clicked. Function is working properly if I use hardcoded string. But when I add
#Resources.myString into, it stops working, I can't figure out why
$('.form-horizontal').on('submit', function (e) {
if ($("input[type=checkbox]:checked").length === 0) {
e.preventDefault();
alert("This is working");
alert(#Resources.myString); //with this the function is not working anymore
return false;
}
});
I need to add the the string for multilingual purpose.
I tried diferent aproches
alert(#Resources.myString);
alert(#Html.Raw(Resources.myString))
var aaa = { #Html.Raw(Resources.myString)} //and calling the aaa
I think I am missing some basic knowlage of how this should work together
During page rendering, #Resources.myString will be injected as is in the code. For instance, if myString == "abc";, you'll end up with alert(abc); which is not what you want.
Just try to enclose your string in quotes:
alert("#Resources.myString");
As an aside, putting Razor code in Javascript logic is usually considered bad practice, as it prevents you from putting Javascript code in separate files (and therefore caching), and makes the code less readable.
Take a look as this question and the provided answer which gives a simple way to deal with that.
As ASP.NET dynamically generates HTML, CSS, JS code, the best way to find the error is to read the generated sources (Ctrl + U in most modern browsers).
You will see that your code
alert(#Resources.myString);
produces
alert(yourStringContent);
and should result in a console error yourStringContent is not defined.
You need to use quotes as you are working with a JavaScript string:
alert('#Resources.myString');
It will produce a correct JavaScript code like:
alert('yourStringContent');

phantomjs/casperjs count DOM elements

I would like to count the number of, let's say, div elements with 'nice' class. I've got the selector div.nice, but don't know which casperjs class/method to use.
There is a tester.assertElementCount method in fact, but is there anything that simply returns the number of elements?
Just
document.querySelectorAll("div.nice").length
If you can use jquery its fairly simple:
var count = $('div.classname').length;
Found an SO Post that seems to explain using jquery with casperjs, I have no experience with casperjs so I can't help much there.
One of the examples for CasperJS 1.1-beta3 involves checking the number of Google search results for CasperJS. It references __utils__.findAll(), which takes a selector as its argument. It allows you to check the number of items returned using the length property available to any JS object:
test.assertEval(function() {
return __utils__.findAll("h3.r").length >= 10;
}, "google search for \"casperjs\" retrieves 10 or more results");
I've never tried it, but it seems like this utility function can be used outside a conditional, and it will allow you to report the number of elements without using jQuery, as a previous answer recommended.
Casper provides getElementsInfo, you can use the attribute length to get the number of elements.
e.g.
casper.getElementsInfo('myElement').length
you also can use assertElementCount to assert the count of the elment
test.assertElementCount("div.nice", 1)
I did not find the answers above to be helpful to my cause.
I think the goal was to count the number of elements without having to evaluate the js code in the page context, which could be frustrating overtime and have conflicting variables and functions.
Instead, it would be nice to leverage the casper automation context. This can be done with a combination of ".exists()" and the css psuedo-selector ":nth-of-type(i)"
The code below does this...
var counter = 1; //set to one, for css selector setup
casper.then(function() { //wait your turn
//loop through our element
while(casper.exists( 'div span:nth-of-type(' + counter + ')' )) {
counter++; //count the results
}
});
You could make this a function and pass in all the arguments, or just copy and paste it as a step.
Best part, you could follow it with a repeat statement for a pretty cool loop.
casper.then(function(){
this.repeat(counter, function() {
console.log("Another one - item #" + counter);
});
});

Javascript Leading Zero Function Argument

I am scratching my head over a problem that I am having with one of my JavaScript functions.
I have the following code:
function getdetails(id)
{
$('#details').load('load.php?id='+id);
}
The issue with this is, the id often starts with a leading zero or a series of leading zero's, which means they get cut off. I understand that it's treating it as an octet which is fine.
So I try to add the following
function getdetails(id)
{
var id = parseInt(id,10);
$('#details').load('load.php?id='+id);
}
This however still cuts off the zero's. I have seen some of the padding functions that people have suggested, but for one I can not predict how many zero's there will and as far as I can tell, the zero's get removed as soon as it gets passed through as an argument.
Any suggestion on how I can solve this problem?
Your code is fine - it's the calling code that needs to be changed. Rather than calling your method with an integer parameter:
getdetails(0011);
Consumers should call the method with a string parameter:
getdetails('0011');

... (three dots) in jQuery?

I was looking at the documentation page for jScroll plugin for jQuery (http://demos.flesler.com/jquery/scrollTo) and I noticed this :
$(...).scrollTo( $('ul').get(2).childNodes[20], 800 );
So, what does the three dots in jQuery mean ? I have never seen this selector before
EDIT :
DOM Element
This is from the source HTML. Viewing the source for the following links :
Relative
selectorjQuery
objectDOM
ElementAbsolute
numberAbsolute
all give the same implementation.
EDIT : I didnt look at the attribute clearly, its for the title attribute. I assumed its the href attribute. Feel silly asking this question now :) Thanks for the answers
I am fairly certain that he was using that as an example.
$( ... ) would be akin to $( your-selector-here ).
In other words, I have never seen any implementation of that.
Typically ... is used in various docs to shorten the example, and it means that you put something in place of the dots, or that what you would put there was omitted (to shorten the example)
It's not actually valid JS syntax.
It has no meaning. They meant just write your own selector.
Check out the souce code
$('div.pane').scrollTo( 0 );
They are not syntactically correct. They are just way the author uses to say scroll to some element, the name of which I don't bother to write here so I just write dots. Check the source code of the page if in doubt.
Three dots in javascript is Spread Syntax see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals)

Categories