Develop Reference

Track JavaScript event

I have GA on my website and i'm trying to track every click on the website. The following JavaScript must be used, it acts like an overlay on the page:
<script type="text/javascript">
var tile = new HTMLLiveTile.TileController();
window.onmousedown = function() {
tile.openStoreProduct("var1", "var2", "var3");
}
</script>
What would be the HTML equivalent code to track this?
Right now i have:
<a id="tile" onClick="ga('send', 'event', 'click1', 'click2', 'sample');"><img src="./images/image.png"> </a>
I'm very new to this, sorry if it's redundant. My assumption was to track the variable and add it to the onClick.

I guess you are asking for a solution that does not require much hassle and much changing in code and moreover without any need to change your previous code.
you can use event.target.+ things you need to know to get info.
function mouseTrack(){
var element_name = event.target.tagName;
alert("mouse click was detecteted at: "+ element_name);
}
window.addEventListener('click', mouseTrack(), false);
this code will alert the Tag Name of Element clicked (like DIV, a, SPAN etc you know the list.). But this code is awful.It wont work in Mozilla FF, It wont work In IE 9 below. I took some time to create a fiddle on JSFiddle.net you can view example I made Here

Phonegap jQuery onClick handler

I am trying to open links with the default ios system browser instead of the inappbroswer plugin. The following code does not open with the system browser:
function openlink(x){
window.open(x.href, "_system");
return false;
}
<h1>google</h1>
<h1>yahoo</h1>
$("html").click(function(){
$(".exLink").attr("onclick", "javascript:return openlink(this)");
});
This code does open with the system browser but it's not what I need.
<h1><a href="http://google.com" onClick='javascript:return openlink(this)'>google</a></h1>
What's the best way to get the onclick attr() to work?

Try something like this:
$(".exLink").on('click', function() { openlink(this); return false; });

It's because the click event for the .exLink is assigned, but not triggered, only when html level is clicked.
unless capturing the click event at the html level is there for a reason, try
$(function(){
$(".exLink").attr("onclick", "javascript:return openlink(this)");
})

Try simple like this -
google

jquery html update working on computer but not on smartphone

I'm using following-like code on my website
<span class="box">
<noscript>
<img src="images/imagebox.png">
</noscript>
</span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
$(document).ready(function() {
$('span.box').html('<img src="images/imagebox.png">');
$(document).on('click','span.box', function(){
// rest of code
});
});
as you can see, i built it the way if the client has javascript, the content of is replaced by without link so it's more interactiv for the client and if the client has no javascript, he still has with the link the way he can still make the necessary action...
While this works perfectly without any trouble on the computer, on smartphone (at least mine), it doesn't work but i don't know why... actually, on my smartphone, i can't see the and can't do any action as if it wouldn't have javascript while it has... I have android 2.1 on my smartphone...
Do you know any solution or workaround for this, the way i can have this and necessary action ability even on smartphone?
Thanks in advance for your help!
EDIT: I finally opted for a solution like in JavaScript function in href vs. onclick

All mobile devices don't handle click events.. should be:
$('<img />').attr('src', 'images/imagebox.png').appendTo('span.box').bind('click touchstart', function() {
// handle click / touch
});
also see this post about double trgiggering issue in some touch enabled devices:
How to bind 'touchstart' and 'click' events but not respond to both?

try to use
$(document).on('pageinit', function(){}); or $(document).on('mobileinit', function(){}); instead of
$(document).ready(function(){});

NivoSlider - Disable Right Click

I have been asked to put in place disabling of the right clicks on a website, I've informed them there is so many ways that people can still download the images via Google Images, Cache, Firebug etc etc, but none the less my arguments have gone ignored and they insist this must be done.
Any, I've put in the footer some code that disables right clicking on all elements using <IMG src=""> this fails to work on NivoSlider, I did change the script to use window load on disabling the right click which works but after slide1 it stops working and I assume this is something to do with changes to the DOM.
JavaScript is by far my weakest point and I'm hoping that someone without to much trouble can either give me a full working solution or something to go on. Thanks in Advance.
They are using NivoSlider with the following trigger:
<script type="text/javascript">
(function($) {
$(window).load(function() {
$('#slider').nivoSlider();
});
})(jQuery);
</script>
And this is the code that I've placed in the footer that fails to work on slide2+
<script>
$(window).load(function() {
$('img').bind('contextmenu', function(e) {
return false;
});
});
</script>

You're absolutely right with the DOM changes. You need to delegate the event to a parent element.
Try something like this:
$('#slider').delegate('img', 'contextmenu', function(e) {
return false;
});
Or this if using jQuery > 1.7:
$('#slider').on('contextmenu', 'img', function(e) {
return false;
});

You might be able to do it by preventing the default behaviour of a right click on the image.
See this answer: How to distinguish between left and right mouse click with jQuery

jQuery toggle() prevents loading of image

I'm new to jQuery and found the toggle function really attractive. I wanted an image to switch to different image after a click and back again, like this:
$(document).ready(function() {
$("#expand").toggle(function(){
$(this).attr("src","images/expandWidget.png");
},function(){
$(this).attr("src", "images/minimizeWidget.png");
});
}); // end ready
And the image itself is declared like this:
<img id="expand" src="images/minimizeWidget.png"></img></div>
I notice that when I ran this through Chrome, the image changed to:
<img id="expand" src="images/minimizeWidget.png" style="display: none;">
And my image did not show. Why did Chrome do that? If I instead change the toggle to click(), my image shows without a problem and I can switch to a different image, but not back of course. I have no errors in the console and the page doesn't import other styles that would affect img. Am I using the toggle incorrectly? Please let me know if you need more information.
Thanks

Instead of toggle use .click()
LIVE DEMO
var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0;
$("#expand").click(function(){
this.src = images[++c%2];
});

You've misunderstood what jQuery toggle does.
It 'toggles' the visibility of an element, hence it disappearing. It's not the greatest name admittedly, but we all used to have to write our own version of the toggle method inside .click().
See the documentation:
http://api.jquery.com/toggle/
You probably want something like:
$("#expand").click(function(){
if($(this).attr("src") == "images/expandWidget.png") {
$(this).attr("src", "images/minimizeWidget.png");
} else {
$(this).attr("src","images/expandWidget.png");
}
});