We Keep Coding

Crazy trouble with addEventListener

I have a div with id="inn"
and then a code like this:
var zin = document.querySelector("div#inn");
zin.addEventListener("click", function(e){
if (count <= maxzoom) {
startZoomIn();
}
})
The crazy trouble is that, if I click with mouse, all works fine, but if I use (as needed) the over cursor (I'm workin' with Leap Motion), it don't work, it seems isn't recognized...
The very strange thing is that an absolutely equal code, for different element, works perfectly; and that, exactly the same code works fine on a different page...
I'm workin' around this trouble by many hours, and maybe are stultyfied..., but in any way I try to approach to solve, the trouble stay always there...

Just had a quick loop at the Leap Motion JS Reference and it looks like you need to handle gestures (such as click differently)
Additionally, you might find LeapCursor.js helpful.
It should make it easier for you to do something like:
$("#inn").click(function() { alert('Leap cursor click!'); });

Function only works in Opera

I wonder if I could get some direction on this problem. I have a forum with a js function to surround text in a message with bb code, but it only works in Opera. In other browsers, it just doesn't do anything, the highlighted words just become not highlighted any more. The actual parser to convert from bbcode to html works fine, its just this surroundText function which is not working.
Here is the routine:
$('.surroundText').click(function(event) {
event.preventDefault();
var before = $(this).data('text'),
after = $(this).data('text-after');
surroundText(before, (after) ? after : '');
});
Ultimately I am going to have to install some debugging software and deal with this, but could someone see anything here which is fixable? For some reason Opera works perfectly and everything else doesn't, for a few minor functions on the platform. This is the biggest one.
Edit: Oh and the buttons have this code:
<a class="bold" href="javascript:void(0);" onclick="surroundText('[b]', '[/b]'); return false;" title="Bold">Bold</a>
This is from a working sample...the code is the same, I was confused. Can anyone see a clear problem?

Finally, I figured this out, its so simple. The jQuery wasn't loading in the other browsers at all. The issue was pretty simple,
When the JavaScript was loaded, the line looked like this:
.script("http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js").wait()
and the problem was that the http: isn't supposed to be there, therefore jQuery wasn't loaded at all.
So the proper line is:
.script("//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js").wait()

JavaScript button fires perfectly in Chrome and IE but won't work in Firefox

I'm sure the title looks like something that's been asked before but I've searched for the answer to this and I can't find it.
I'm really very new to coding, so please excuse any really obvious mistakes I've made.
Context to the code I'm working on: I'm in a Game Design class and I've decided to take up a personal project making an HTML JS game.
I understand that the code is possibly rough / bad / definitely-not-the-best-way-to-do-things, but it will continue to be so until I improve my skills (or am given advice on how to improve it).
What I need help with: For two to three weeks, I could not figure out how to get a button to appear when implemented inside of an if else statement.
Like so:
if(condition)
{
document.write("text");
//desired button here
}
else
{
//Backup code
}
Eventually I figured two ways to do that (for Chrome and Internet Explorer).
First way:
function myFunction()
{
document.close();
document.write("text");
/* There will be buttons in here
too when I get things working. */
}
//In separate script tags
/* myFunction() dwells in the head of the
page while the if statement is in the body
and another function*/
if(condition)
{
document.write("text");
var gameElement=document.createElement("BUTTON");
var text=document.createTextNode("CLICK ME");
gameElement.appendChild(text);
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
else
{
//Backup code
}
The second way:
(The same function, they're both in the same places).
if(condition)
{
document.write("text");
var gameElement;
gameElement = document.createElement('input');
gameElement.id = 'gameButton';
gameElement.type = 'button';
gameElement.value='Continue';
gameElement.onclick = myFunction;
document.body.appendChild(gameElement);
}
This works well for me.
And while it works in IE and Chrome fine, it doesn't work in Firefox.
After how much time and research I've put into just this button, I'd love to know why it won't show up in Firefox. I've read a lot about Firefox and how .onclick won't work or something like JavaScript has to be enabled or disabled. I'm just a bit confused.
I'm also open any real / relevant advice.

I set up this fiddle. I removed your document.write() calls because they're disallowed in JSFiddle, and change your condition to true so the code would work, and it works in FF24.
document.write() might be the cause of your problem. It's bad practice anyway because it can cause a re-parse of a document, or wipe the entire document and start writing it again. You're already using some DOM manipulation to add the button. I suggest you do likewise for anything you're considering using document.write() for.

Instead of suggesting a solution to your problem, I would suggest you take a look at jQuery, which is a very nice JavaScript framework, that makes it possible for you to write cross-browser compatible code, which it seems is your problem here.
Using jQuery, you would be able to write something like:
$("#gameButton").click(function() { myFunction(); }
which would trigger your myFunction() function, when the control with the id 'gameButton' is clicked.
Visit www.jquery.com to learn more

one function not running with jQuery infinite carousel build

so i have tried making myself an infinite carousel using html, css & jQuery and everything is working apart from the back button will not loop, i've spent quite a while doing this now and i'm wondering if anyone has any insight? http://jsfiddle.net/e2SKk/ is where you can see the code! i'm only really doing this because i thought it would give me a chance to learn a lot more, but any criticisms of code layout or technique would be helpful!
specifically its this code thats seems not to work
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
that is only a snippet btw and won't make much sense without the rest!

jQuery is cool to write short scripts.
Your slider code in short:
var width = $('.slider').width();
$('.item').css({width:width});
var $holder = $('.item-holder').css({left:-width}).prepend($('.item:last'));
$('.prev').click(function(){
$holder.not(':animated').css({left:-2*width}).prepend($('.item:last')).animate({left:-width});
});
$('.next').click(function(){
$holder.not(':animated').css({left:0}).append($('.item:first')).animate({left:-width});
});
​
That's the complete code.
See this in action on http://jsfiddle.net/creativecouple/YPU2d/

Pretty cool little slider you have going here! You say you are a beginner? I'd say you've picked up on jQuery quite well! Also before I forget, addressing your comment: if you post something on stackoverflow...it WILL be viewed, likely by many people :). It's rare to come here and receive no help (albeit you may not always get an answer).
Fortunately for you, I've found your problem! It's right here:
else if(loopPrev==true){
sliderActive=true
$('.item-holder').css({
'left':clonePos
});
$('.item-holder').animate({
'left':holderPos+$('.slider').width()+'px'
},function(){
sliderActive=false;
});
};
You are checking whether or not to loop, setting the slider to active, setting the next slide to the last slide in the index (and subsequently pushing it to that at the same time), then you animate as you normally would. This results in two movements: first to the back of the index, then to the value of holderPos+$('.slider').width()+'px'...hence your strange behaviour. This should help:
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':"-1800px"
}, function(){
sliderActive=false;
})
};
The value "-1800px" is just the last slide in your buffer that I precalculated...you should be able to replace it with your clonePos variable without trouble.
*EDIT: You should also change your variable clonePos to look like this:
var clonePos = '-'+($('.item').index()-1)*($('.slider').width());
It will eliminate a bug when you swap between the last slide in the index and the first slide (a "smooth transition" if you will).
**
Part II
**
In order to achieve the illusion of infinite scrollability you will need to embed a callback "push back" function inside the "left pressed" animation call. It's late here so I haven't tested the code I am about to write but I'm fairly confident it will work for you.
else if(loopPrev==true){
sliderActive=true;
$('.item-holder').animate({
'left':clonePos
}, function(){
$(this).css('left':holderPos+$('.slider').width()+'px');
sliderActive=false;
})
};
If you take a look this isn't much different from the original answer I offered. All we have done is take the callback function for animate, and added a call to slip the position to the original index position. Again, untested, but the idea is that .animate() will slide to the clone, once that is done your callback will swap the clone with the original, and then deactivate the slider.
You weren't very far off! Here's a semantic rule of the animate function (to attempt to help your understanding of the way a callback works):
animate( params, [duration], [easing], [callback] )
params is our left call (to the cloned slide in this case)
duration is ignored here
easing is ignored here
callback is our function() call that does our little david copperfield swap
Hope this helps!

Make a Firefox add-on to inject some DIVs and add styles. That's it

I am going to ask a VERY general question. I was working on a bookmarklet and decided to create a few browser extensions as well. I was able to make Safari and Chrome extensions pretty quickly but when it came to FF, I was a failure.
I used their builder but it kept giving errors even when I was using their sample code cut and pasted.
If someone could give me a simple step in the right direction, I would appreciate it.
Literally, all I am trying to do is make the add-on button in the add-ons bar clickable and perform either a function or directly an if statement that checks for the existance of the DIVs and if they don't exist, create them, and if they do exist, destroy them. Basically a toggle.
I have read most (I am sure not all) of their docs in reference to this, but cannot make it work.
I am not looking for the code to do this, but I am missing something.

This is the solution:
var widgets = require("widget");
var tabs = require("tabs");
var widget = widgets.Widget({
id: "div-show",
label: "Show divs",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function() {
tabs.activeTab.attach({
contentScript:
'alert("foo");'
});
}
});