Here is my jquery code
(function($){
var W=$(window),
D=$(document),
Ht = D.height(),
Wt = W.width();
$.fn.ThrowMask = function(){
//Working code
}
});
i tried to attach this code on button click like this
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
ThrowMask();
});
});
</script>
But this causes error undefined.
In addition to Isaac Fife's fix, you need to call the function properly.
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(this).ThrowMask();
});
});
</script>
You never call the lambda function. use this instead
(function($){
var W=$(window),
D=$(document),
Ht = D.height(),
Wt = W.width();
$.fn.ThrowMask = function(){
//Working code
}
})($);
Notice the two extra parens. Added jquery to function call.
This is the working code:
(function($){
var W=$(window),
D=$(document),
Ht = D.height(),
Wt = W.width();
$.fn.ThrowMask = function(){
//Working code which binding click event
$(this).click(function (event) {
// do your click even handler here
});
}
}(jQuery));
<script type="text/javascript">
$(document).ready(function(){
$("#btn").ThrowMask();
});
</script>
Related
I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?
Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")
You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});
You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/
you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>
Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});
concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>
If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});
I'm trying to load html into div's that have dynamically created id's by passing the id to the function as a data attribute. Doesn't seem to work though.
<script>
$(document).ready(function(){
$('input:radio').on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
});
});
</script>
Have you tried something like this? Please look at the valid event names for jQuery. 'ifChecked' is not one. http://api.jquery.com/category/events/
$('input[type="radio"]').on('change', function (e) {
if($(this).prop('checked'))
{
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
}
});
Not an answer, just a couple of things to try. Please let us know the results if this doesn't lead you to the solution:
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
alert('received the click');
});
});
</script>
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
alert('clauseDivID: ' + clauseDivID );
});
});
</script>
I need to create on snippet of javascript that, based on an A tags id, the window will navigate to the proper html file. I've got something together that when I look at it, it should work but for some reason it doesnt. Here's what I got.
<script>
$(document).bind('pageinit', function() {
$('a').each(function (index){
var elementId = $(this).attr("id");
elementId= elementId + '.html';
$(function(){
$(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
});
});
});
});
</script>
This part is so that I can load an external html in an ios web app with out exiting the web app window
$(function(){ $(elementId).click(function (event) {
event.preventDefault();
window.location.assign(elementId);
Did I write the variable wrong some how? Any help would be appreciated
I'll take a wild guess:
$(function(){
$('a').on('click', function(e) {
e.preventDefault();
window.location.assign(this.id + '.html');
});
});
This is a simplified version of what you have there...
<script>
$(function() {
$("a").on("click", function(e) {
e.preventDefault();
window.location.href = this.id + ".html";
});
});
</script>
I wanna get selected id from my tabs. I tried anything but but I am very weak in javascript. This my tabs.
<li>Pondelok</li>
<li>Utorok</li>
<li>Streda</li>
<li>Štvrtok</li>
<li>Piatok</li>
<li>Sobota</li>
<li>Nedeľa</li>
This is my attempt, which return undefined.
<script>
var selected_tab = $(".ui-state-active").attr("id");
document.write(selected_tab);
</script>
this will alert id of tab on which you have clicked
$('.days').click(function(){
alert($(this).attr('id'));
});
if you want to write it on document use this
$('.days').click(function(){
document.write($(this).attr('id'));
});
Live Demo
http://jsfiddle.net/zgDYZ/
<script>
var selecId = "";
$('.days').click(function(){
selecId = $(this).attr('id');
});
</script>
Use selecId where ever you want..
Your are trying to to get attribute from class .ui-state-active which doesn't exist as per your markup. So your code wont work:
Try the below and this will work:
$(function() {
$("ul li").each(function() {
var selected_tab = $(this).find("a").attr("id");
alert(selected_tab);
})
});
<script type="text/javascript">
$(document).ready(function () {
$('.days').click(function () {
alert($(this).attr('id'));
});
});
</script>
another best way with validations
$('a.days').click(function(){
alert($(this).attr('id'));
});
I have the following function that is supposed to trigger anytime one of the numbers in my pagination is clicked.
<script type="text/javascript">
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
</script>
The pagination looks like this:
<div class="pagination">
<ul>
<li>1</li>
<li>2</li>
...etc
</ul>
</div>
For some reason, the function is never firing. I even put in a very obvious alert to confirm that it's hearing the click, but I'm not even seeing this.
So what is it that I'm doing wrong Everything seems correct to me...
Try to wrap it inside $(document).ready(function () { ... }); Something like below,
$(document).ready(function () {
$("div.pagination li").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
If the li is dynamically generated then you should use .on (for jQuery 1.7) or .live/.delegate (older jQuery).
$(document).ready(function () {
$(document).on('click', 'div.pagination li', function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
Note: Replace $(document).on('click', 'div.pagination li', function(event) { with $('div.pagination').on('click', 'li', function(event) { if div.pagination exist on load.
Put it in a document.ready
$(function(){
$("div.pagination a").click(function(event) {
alert("Click");
event.preventDefault();
var url = $(this).attr("href");
$("input[name='order']").val(order);
$("#form_session").attr('action', url).submit();
});
});
Try:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("div.pagination li a").click(function(event) {
event.preventDefault();
alert("Click");
var url = $(this).attr("href");
$("input[name='order']").val(order);
// Where is order coming from?
$("#form_session").attr('action', url).submit();
});
});
</script>
You missed the a in your selector. Make sure the DOM is ready $(document).ready. And where is the order variable coming from? Is order defined?