I tried this:
<script src="js/jQuery.js"type="text/JavaScript"></script>
Then I tried to call a click function on my button:
<script>
$(document).ready(function (){
function jfn1(){
$("jbtn").fadetoggle()
}
})
</script>
Welcome to StackOverflow, Chisom.
All you did was define that function, you didn't actually call it. Also it needs to be "fadeToggle", not "fadetoggle".
/**
* Define function to fade button in/out
*/
function jfn1 () {
$("jbtn").fadeToggle() // "fadeToggle", not "fadetoggle"
}
/**
* On document ready (DOM loaded)
*/
$(document).ready(function (){
// Call function on document ready
jfn1()
})
This will call "fadeToggle" when the DOM tree is loaded. If you want to call it when clicked, it needs to look like this:
/**
* On document ready (DOM loaded)
*/
$(document).ready(function (){
// On button clicked
$("jbtn").click(function () {
// "this" is the function context
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
$(this).fadeToggle()
});
})
Also $("jbtn") will only find HTML elements that look like this: <jtbn>...</jtbn>. If you want to refer to a class (<HTML_ELEMENT class="jtbn"></HTML_ELEMENT>...), you should prefix it with a dot like this: $(".jbtn").
Good luck! 😊
I'm not sure what you're trying to achieve but with the code below, clicking on the button with class 'jbtn' will make it fade out.
$(document).ready(function (){
$('.jbtn').click(function() {
$( this ).fadeToggle();
});
})
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<button class="jbtn">Hey!</button>
Related
I have a function in jQuery that I would like to run on Page Load and on Change. How would I do this? I currently only have the change part..
$('input[name=INPUTNAME]').change(function(){
....
});
You can pass a function to your input change listener and also call the same function on document ready.
$(function() {
yourFunction();
$("input").change(yourFunction);
});
function yourFunction() {
alert("foo bar");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
Try
$(document).on("change", "input[name=INPUTNAME]", function(){})
Reference
http://api.jquery.com/on/
(function($) {
$(document).ready(yourFunctionName());
$('input[name=INPUTNAME]').on('change', yourFunctionName());
function yourFunctionName(){
//function body
}
})(jQuery);
Try this. Basically, we have a function and call it on input change and when the document is ready.
I have a .NET web control that includes some JavaScript structured something like this:
<script type="text/javascript">
function doSomethingImportant() {
// Do something important here...
}
$(function () {
// A bunch of JavaScript/jQuery code here...
});
</script>
The doSomethingImportant() function is placed outside of my $(function() { ... }) block so it can be called from JavaScript on the page that hosts my web control.
But I would like this function to be able to access some code within the $(function() { ... }) block. Is this possible? Is there a better way to structure this?
If you add a code on window object in the jquery function you can call it from the outer function.
e.g.
<script type="text/javascript">
function doSomethingImportant() {
// Do something important here...
window.myfunc();
}
$(function () {
// A bunch of JavaScript/jQuery code here...
window.myfunc = function(){
}
});
</script>
In my website, there include such 2 files: index.php, script.js
Of course, it is much more complicated in the web site and the above only shows a part of it.
In index.php, there is a div element
<div id="phb29" class="drag ph hour01">Testing</div>
In script.js,which is a pure javascipt file,below show a part that i want to use a jquery function .switchClass() (from http://api.jqueryui.com/switchClass/) to switch the class of div element.
//... other normal js codes
switchClassHour = function(){
$(function (){
$( "#phb29" ).switchClass( "hour01", "hour03", 1000 );
return false;
});
}
//other normal js codes...
I only want to call that jquery when I call the switchClassHour() function but not the web page is loaded(i.e. $(document).ready(function (){...}); )
I have included the source in the in index.php:
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
But finally, the chrome browser gives me this error occurring at the line $(function (){ when I trigger switchClassHour():
Uncaught TypeError: boolean is not a function
What should I do, thank you !!!!! :):)
The variable toHour does not appear to be defined within the function switchClassHour.
Try this
switchClassHour = function(){
/* `toHour` ? */
if (window.jQuery) {
/* $(function (){ */
$( "#phb29" ).switchClass( "hour01", "hour03", 1000 );
/* `return false;` ? */
/* }); */
};
};
switchClassHour(); /* just noticed, is the function actually called ? */
Edit
Try this
switchClassHour = function(){
/* `toHour` ? */
if (window.jQuery) {
/* $(function (){ */
console.log($.now())
/* `return false;` ? */
/* }); */
};
};
switchClassHour();
Is $.now() return'ed at console?
Is $ utilized in other parts of non-jquery pieces?
See also https://api.jquery.com/jQuery.noConflict/
Edit
Try this
switchClassHour = function() {
jQuery.noConflict();
(function( $ ) {
console.log($.now(), jQuery.now())
})(jQuery);
};switchClassHour();
Hope this helps
function switchClassHour(){
if(document.getElementById('jq')){
//original switchClassHour() code.
}
else{
var jq = document.createElement('script');
jq.src = "WHATEVER SOURCE YOU WANT TO LOAD FROM (PROBABLY GOOGLE)";
jq.id = "jq";
document.getElementsByTagName('head').item(0).appendNode(jq);
//Original switchClassHour() code
}
}
I don't know if this is guaranteed to work since I don't know if you'll be able to load jQuery fast enough to call your function immediately afterwards. If this doesn't work because jQuery isn't loading fast enough then the only outcome I could see is adding a delay but that's ugly. To be honest if you're using jQuery I would just load it from Google normally in the <head> of your page. Most people have it cached already.
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.
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();
});