I would like to track googleplusone clicks without using google analytics. Is there any functionality available for this? I tried to google it but to no avail.
UPDATE: I tried this but the callback is not fired?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script>
<script type="text/javascript">
function helloWorld(plusone) { alert('+1 Triggered, State=' + plusone.state); }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<g:plusone callback="helloWorld"></g:plusone>
</div>
</form>
</body>
</html>
You set the callback attribute on the +1 tag to a javascript function.
This function is called after the user clicks the +1 button. The callback function must be in the global namespace and may accept a single parameter, which will be a JSON object with the following structure:
{
"href": target URL,
"state": "on"|"off"
}
The state property is set to "on" for a +1, and "off" for the removal of a +1.
Related
I have tried to set the value on the Autocomplete control and set the focus from java script. The value is set to the field but the list of predictions are not displayed when page is loaded.How can I also show the prediction list with the initial search string set on the field when page is loaded.Please see the below the code.
Please note as soon as user click on the control(Manually) the dropdown is displayed.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
$(document).ready(function() {
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
});
//$("#address").val('George Street');
$("#address").focus();
</script>
</body>
</html>
I have found the solution for this. I have hooked the code to set the value and set the focus on the control in the DOM Event 'load' as below
google.maps.event.addDomListener(window, 'load', function() {
$("#address").val("George Street");
$("#address").focus();
});
i use this code in web forms and worked correctly but in master-page doesn't work
in head of master
<link rel="stylesheet" href="css/FirstPage.css" />
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script>
$(document).ready(function () {
$("div[id$='slide']").show('bounce');
$("div[id$='content']").accordion({ fillSpace: true, collapsible: true, active: false });
});
</script>
in body of master
enter code here
but it doesn't work, this code exactly work in web forms but not work in master page why?
Your code is not working because by default web forms page (be it regular page or master page) will add extra prefixes to the controls if they are placed inside other controls which are implementing INamingContainer interface.
If you are sure that you need runat="server" attribute on your divs then you can use inline code and use a ClientID property to get generated identificator:
$(document).ready(function () {
$("#<%=slide.ClientID%>").show('bounce');
$('#<%=content.ClientID%>').accordion({ fillSpace: true, collapsible: true, active: false });
});
Alternatively you can use ClientIDMode enumeration to control how client identificators are selected. In your case use ClientIDMode.Static:
<div runat="server" class="slide" id="slide" ClientIDMode="Static"></div>
I suspect this is because your control ids will be prepended by the ids of the content place holders.
Use the below CSS Selectors to access the controls that ends with id 'slide' and 'content'. Hope that helps..
$("div[id$='slide']")
$("div[id$='content']")
I've been trying in vain for the last couple hours to learn History.js. I've created three extremely simple test files, but I can't seem to get anything working. Here are the contents of my three files.
history.html:
<!doctype html>
<html>
<head>
<title>History Test</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>
<script type="text/javascript" src="history.js"></script>
</head>
<body>
about
</body>
</html>
history.js:
$(document).ready(function() {
History.Adapter.bind(window, 'statechange', handleStateChange);
});
function handleStateChange() {
alert("State changed...");
}
about.html:
<!doctype html>
<html>
<head>
<title>About</title>
</head>
<body>
About...
</body>
</html>
When I click the 'about' link, why doesn't the statechange event fire or my handleStateChange() function execute?
I'll answer my own question in case it helps someone else. I was under the mistaken impression that the 'statechange' event would fire anytime the browser's URL changed (e.g. clicking a link or clicking the back button). What I discovered is that 'statechange' only fires when you push something onto the History. So I updated my JavaScript to add a listener to the link...
history.js:
$(document).ready(function() {
History.Adapter.bind(window, 'statechange', handleStateChange);
$("#about").click(function() {
History.pushState(null, null, "about.html");
});
});
function handleStateChange() {
alert("State changed...");
}
...and now I get the alert when I click the link and when I click the browser's back button.
I have a text box called txtName on my form.
In my page I know I need to place the code in my HEAD tag like so......
<script type='text/javascript' language="javascript">
document.FormName.txtName.value = "Robert";
</script>
But I cant seem to set a value to my textbox txtName with the above code......
That's because your code get executed before the DOM is created.
You can do something like this
window.onload = function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
}
or use JQuery
$(function() {
document.forms['FormName'].elements['txtName'].value = "Robert";
// for a shorter syntax use id
$('#txtNameId').val("Robert");
}
Your script executed before page loaded. Use onload event
Can you set the id on the textbox? Then you can use getElementByID("textboxid"); Selecting by id is faster.
UPDATE:
You need to ensure that the DOM has been load so that your script can locate the element you want to update. One way is:
<body>
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
LoadTextBox();
</script>
</body>
An alternative could be where you use onload in the body tag:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function LoadTextBox(){
document.getElementById("txtName").value = "ready to go";
}
</script>
</head>
<body onload="LoadTextBox">
<form>
<input id="txtName" name="txtaaaName" type="text" value="notnow"/>
</form>
</body>
I want make datetimepicker in my project. Using jquery how it is possible?
I have one text box, div and calendar. Once i focus on textbox, the calendar div gets fadein. Some way what i want to do is this: Once i click on calender the selected value should show in textbox and calender should hide. How?
Here is the code so far.
$(document).ready(function() {
$(".txtDateTime").focus(function () {
$(".CalenderDiv").fadeIn("slow");
});
$(".UserCalender").click(function () {
$(".CalenderDiv").fadeout("slow");
$(".txtDateTime").val("fdgfg");
// ================??????
});
});
This code once i click textbox calender will show. But in the case of Calendar click it is not working? Why....Please Help me....
Seems like you are re-inventing the datepicker widget from jQuery UI. Is that correct? Why not just use what works?
full code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple DatePicker example</title>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css"></link>
<script type="text/javascript"
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript"
src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script type="text/javascript" language='javascript'>
$(document).ready( function (){
$('.pick-date').datepicker({clickInput:true});
});
</script>
</head>
<body>
<h1>jQuery UI datepicker example</h1>
<div class="inputDiv">
<p>Click in the box to select a date:</p>
<input id='b1' class='pick-date' value=''/>
</div>
</body>
</html>
demo: http://jsbin.com/ewime
You should checkout jQUeryUI's Datepicker widget: http://jqueryui.com/demos/datepicker/
The widget has got the functionality you are looking for.. and you do not have to create your own calendar.