I need to handle 'tweet' event. That is what I have now, but it doesn't work:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
function jsTweet() {
// some other stuf here
// ...
var urlTW = "https://twitter.com/intent/tweet?text=Text&url=http://my_url.com";
var winTW = window.open(urlTW,'','toolbar=0, status=0, width=650, height=360');
}
(function() {
twttr.events.bind('tweet', function(event) {
alert('tweet!!!!');
});
}());
</script>
<a href="javascript:void(0)" onClick="jsTweet();">
Several things :
1/ Close your anchor tag.
2/ Your anonymous function is called only when the page is loaded. The twttr object doesn't exist at this time. So there is no binding done. Debug your function with Firebug or something, this should appear as an error.
Related
I have somehow a beginner's question about the following structure:
<body>
<p id="text_object">Some text</p>
<button id="button_change_text">change text on click</button>
// Individual script on page template
// ----------------------------------
<script type="text/javascript">
var object = $('#text_object');
changeTextOnLoad(object);
</script>
// Footer from included footer.php with universal main.js file
// ------------------------------------------------------------
<footer>
<script type="text/javascript" src="main.js">
</footer>
</body>
My main.js contains the following:
// declaration of function for writing new text into text object on load
function changeTextOnLoad(object) {
object.text('New text');
}
// declaration of click function
$('#button_change_text').on('click', function() {
$('#text_object').text('New text');
});
My problem: My console tells me that changeTextOnLoad() is undefined. But clicking on the button and changing the text by this way works perfectly fine. Where is the reason? Why in my main.js file does the click function get fired but not the changeTextOnLoad function?
You are calling your changeTextOnLoad function before the main.js file has loaded. Either put the function call in an onload event callback or put the include above the call
window.onload = function(){
var object = $('#text_object');
changeTextOnLoad(object);
};
//Or using addEventListener
window.addEventListener("load",function(){
var object = $('#text_object');
changeTextOnLoad(object);
});
//Or since you are using jQuery
$(document).ready(function(){
var object = $('#text_object');
changeTextOnLoad(object);
});
//Or
$(function(){
var object = $('#text_object');
changeTextOnLoad(object);
});
OR
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
var object = $('#text_object');
changeTextOnLoad(object);
</script>
because main.js is another file, browser takes time to download it. But you run changeTextOnLoad(object); before that.
How to enable chrome extension without clicking it.
I need to perform a certain function from my extension every time i reload a page(no clicking)
is there a way to do it.
My code which contains the on click method
chrome.extension.onMessage.addListener(function(request, sender) {
if (request.action == "getSource") {
message.innerText = request.source;
}
});
function onWindowLoad() {
var message = document.querySelector('#message');
chrome.tabs.executeScript(null, {
file: "getPagesSource.js"
}, function() {
// If you try and inject into an extensions page or the webstore/NTP you'll get an error
if (chrome.extension.lastError) {
message.innerText = 'There was an error injecting script : \n' + chrome.extension.lastError.message;
}
});
}
window.onload = onWindowLoad;
and
chrome.extension.sendMessage({
action: "getSource",
source: started(document)
});
To include jQuery:
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
/*all your normal JavaScript (or include as link)*/
</script>
</head>
Using only pure JavaScript you can do this with:
window.onload = function(){/*your JavaScript code*/};
only the code within that function will be immediately executed.
In jQuery you can wrap the code you want executed upon loading of page inside of $(document).ready(function(){, e.g.
$(document).ready(function(){
/*code goes here*/
});
$(document).ready() checks for when a page is loaded enough to have functionality.
I have a javascript file containing a ajax function with parameter x.
I cannot reveal the function.I want to call the function on page load and on a button click.Also there is a for loop on the function for displaying the variable 10 times i.e,
for(i=0;i<10;i++).
The code for that button is :
HTML file
<html>
<title>Call web service</title>
<head>
<script type="text/Javascript" src="jquery-1.9.1.js"></script>
<script type = "text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload=function()
{
Webservice(1)('onload'); //call 1 where webservice is ajax function
}
</script>
</head>
<body>
<input id="button" type = "button" name = "button" value = "Call Webservice" onClick = "Webservice(5)"/>
</body>
</html>
Right now what I am getting is the onload function is getting overridden when I click the button whereas I want the outputs of both the functions to be displayed simultaneously
So please help me.
Thanks in advance.
Try doing this:
function f1() {
//what you need to do
}
function f2() {
//Do the same thing here also
}
This being your JS, in onload, call f1() and for button click call f2(). If you want f1() to execute before f2(), i suggest you look into locks here:
How to implement a lock in JavaScript
Your javaScript code should be something like this:
var fn = function fn(x) {
// Do something
}
$(function() {
var someValue;
// someValue = ...
// Call function once document is loaded
fn(someValue);
// Bind function as a callback to button click
$('#button').on('click', function(event) {
fn(someValue);
});
});
i have following lines included at the bottom of my index.php:
<script type="text/javascript" language="javascript" src="class/jquery-1.4.3.min.js"> </script>
<script type="text/javascript" language="javascript" src="class/jquery.nivo.slider.pack.js"></script>
<script type='text/javascript' language='javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
problem lies in $(window).load ...
index.php's body is updated onload through ajax call which delivers div#slider upon matching. this makes it nivoSlider() not executing. do you have any trick to make this thing work. i do prefer non-jquery way around it, but at the end of the day anything helps.
many thanks
WEBPAGE IS HERE
Add the call in the callback for the AJAX load.
$('.something').load( 'http://www.example.com/foo', function() {
$(this).find('#slider').nivoSlider();
});
Example using your code (for body):
$(function() { // run on document ready, not window load
$('#content').load( 'page.php?c=2&limit=5', function() {
$(this).find('#slider').nivoSlider();
});
});
For link:
<!-- updates links like so -->
<a class='nav' href='page.php?category=art&limit=5&c=1'>art</a>
// in the same document ready function
$('a.nav').click( function() {
var $link = $(this);
$('#content').load( $link.attr('href'), function() {
$(this).find('#slider').nivoSlider();
$link.addClass('selected'); // instead of setting bg directly to #828282;
});
return false; // to prevent normal link behavior
});
Would you not want to use $(document) rather than $(window)?
$(window).load(function() {
$('#slider').nivoSlider();
});
or shorthand
$(function() {
$('#slider').nivoSlider();
});
This has got me stumped, I've tried lots of different things, but I can't get this to work.
Can anyone help? No matter what I try I can't get the click eventlistener on the link to fire. The code is in a greasemonkey script. I believe I have to use the closure method to be able to refer to the function dropit in the greasemonkey script, as it is not available to the code on the page.
dropit = function (e) {
e.preventDefault();
alert(e.target.textContent);
}
document.getElementById('newlink').addEventListener('click',
function (e){
return function (){
dropit(e);
}
}(),false);
You have to have your Greasemonkey script write the code into a new <script> tag in the page. Once that's done, then your in-page event handler setup can proceed as normally. At least, that's the only way I've ever known to do it.
<a id='mylink' href='http://www.google.com'>google</a> the link
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI().use('event', function(Y){
Y.one('#mylink').on('click', function(e){
e.halt();
alert(this.get('href'));
});
});
</script>
here is the non YUI version
<a id='mylink' href='#'>google</a> the link
<script>
(function(){
var dropit = function (e) {
e.preventDefault();
alert(e.target.textContent);
}
document.getElementById('mylink').addEventListener('click', dropit, false);
}());
</script>
e must be passed into second function inside addEventListener, not first.
Like this:
dropit = function (e) {
e.preventDefault();
alert(e.target.textContent);
}
document.getElementById('newlink').addEventListener('click',
function (e){
return function (e){
dropit(e);
}
}(e),false);